html - 你如何使 CSS 网格中的链接/href 显示为内联而不是 block ？

Question

当我使用 CSS 网格将链接插入 div 容器时，它会将链接视为块元素而不是内联元素。即使我试图强制它内联，它仍然将其视为块。如何使链接显示内联？

谢谢你的帮助。

#container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 180px 180px
}

.item {
  display: grid;
  border: 1px solid #ccc;
}

<div id="container">
  <div class="item">
    Text with a <a href="#">link</a> in it. This is text without a link in it.
  </div>

  <div class="item">
    Text with a <a href="#" style="display: inline;">link</a> in it. This is text without a link in it.
  </div>
</div>

这是上面的代码将呈现为:

Answer 1

在网格 CSS 中使用元素选择器

因为你制作了 <div> grid元素，它将其中的所有内容视为 grid还。

要跳出这一点，您可以将您的内容包裹在 <span> 之类的东西中。如以下代码所示。

这些包装器元素中的任何内容都将默认返回其默认状态，即 inline或 block并照常行事。

您可以使用其他元素 选择器 也，例如，<div>text</div> , <p>text</p>或任何适合您设计的东西。

#container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 180px 180px
}

.item {
  display: grid;
  border: 1px solid #ccc;
}

<div id="container">
  <div class="item">
    Text with a <a href="#">link</a> in it. This is text without a link in it.
  </div>

  <div class="item">
    <span>Text with a <a href="#">link</a> in it. This is text without a link in it.</span>
  </div>
</div>