代码之家 › 专栏 › 技术社区 › JuliaBland299

如何使链接不占用网格中的空间?

sass css html

JuliaBland299 · 技术社区 · 1 年前

如何使链接不占用网格中的空间,也不可在空白处单击?

我不知道如何正确解释。看看我的代码。我已经用红色圈出了。我需要去掉这个,但它应该是一个网格。

    .theContainer {
      border: 1px solid blue;
      padding: 20px;
      width: 300px;
      height: 300px
    }

    .theGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 30px;
      grid-auto-columns: 1fr;
      grid-auto-rows: 1fr;
    }

    a {
      border: 1px dashed red;
    }

  <div class="theContainer">
    <div class="theGrid">
      <a href="/a">Link1</a>
      <a href="/a">Link2</a>
      <a href="/a">Link3</a>
      <a href="/a">Link4</a>
 
    </div>
  </div>

2 回复 | 直到 1 年前

Wongjn 1 年前

申请 place-self / justify-self / align-self CSS属性来覆盖的大小 <a> 元素。例如,为了将它们放在每个网格空间的左上角,我们可以使用 place-self: start :

.theContainer {
  border: 1px solid blue;
  padding: 20px;
  width: 300px;
  height: 300px
}

.theGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

a {
  border: 1px dashed red;
  place-self: start;
}

<div class="theContainer">
  <div class="theGrid">
    <a href="/a">Link1</a>
    <a href="/a">Link2</a>
    <a href="/a">Link3</a>
    <a href="/a">Link4</a>
  </div>
</div>

santra72 1 年前

你可以把 <a/> 内部元素 <span/> 元素,然后 <a/> 只会占用他们所需的空间。

这是更新后的代码。

.theContainer {
  border: 1px solid blue;
  padding: 20px;
  width: 300px;
  height: 300px;
}

.theGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

a {
  border: 1px dashed red;
}

 <div class="theContainer">
  <div class="theGrid">
    <span><a href="/a">Link1</a></span>
    <span>
      <a href="/a">Link2</a>
    </span>
    <span>
      <a href="/a">Link3</a>
    </span>
    <span>
      <a href="/a">Link4</a>
    </span>
  </div>
</div>

zemonvoda 1 年前

`.theContainer {
  border: 1px solid blue;
  padding: 20px;
  width: 300px;
  height: 300px;
}

.theGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  position: relative; /* Set position to relative */
}

a {
  border: 1px dashed red;
  position: absolute; /* Set position to absolute */
  top: 0;
  left: 0;
}`

推荐文章