如何使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 {{1}中删除}，因为我认为您不会将其用作网格框，而是用作display: grid;网格的元素。

#container

#container {
  display: grid;
  grid-template-rows: 100px 100px ;
  grid-template-columns: 180px 180px 
}
    
.item {
  border:1px solid #ccc;
}

Answer 2

在网格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>

Answer 3

只需删除内联项即可。

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