如何使CSS网格中的链接/ href显示为内嵌与块？

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

你强迫.item成为一个网格框，所以.item中的每个标记都会像<a>那样对齐网格元素，所以只需从.item display: grid;中删除，因为我认为你不会将它用作网格框而是作为#container网格的元素。

#container {
  display: grid;
  grid-template-rows: 100px 100px ;
  grid-template-columns: 180px 180px 
}
    
.item {
  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="#">link</a> in it.
      This is text without a link in it.
   </div>
</div>

Answer 2

在Grid 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>

<style>
    #container{
     display: grid;
     grid-template-rows: 100px 100px ;
     grid-template-columns: 180px 180px;
    }
  </style>
  <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 3

只需删除项目的内联。

qazxswpoi