html - 可以将html列表项（li）设置为显示：网格吗？

Question

例如，我正在尝试使用以下代码创建一个具有 4 个均匀分布的链接的页脚

footer{
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
    border-radius: 2px;

}
#footer_list{
    display:inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    list-style-type: none;
}
.footer_list_item{
    color: #001f3f !important;
}

<footer>
    <ul id="footer_list">
        <li class="footer_list_item">A Blah Blah Production</li>
        <li class="footer_list_item">Phone: xxx-xxx-xxxx</li>
        <li class="footer_list_item">Email: [e-mail]</li>
        <li class="footer_list_item" href="#">Career Info</li>
    </ul>
</footer>

http://jsfiddle.net/vq9b7c0e/3/

设置alist无效display:grid吗？因为所有的项目似乎都是随机间隔的

标签： htmlcsscss-grid

Answer 1

将 HTML 元素设置为display: grid(或inline-grid) 是完全有效的。

根据 W3C 定义，该display属性适用于所有元素。

display但是，某些元素在属性更改后无法在某些浏览器中正常播放。请参阅这篇文章（适用于 flex 和 grid）：Flexbox not working on button or fieldset elements

你写了：

将列表设置为display: grid无效吗？因为所有的项目似乎是随机间隔的。

您的物品不是随机分布的。网格有四个等宽的列，就像您指定的那样：

你的代码：

#footer_list{
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

您的布局（如 Chrome、Firefox 和 Edge 中所示）：

所以我不确定你的意思。但这是您的代码的简化版本。既然您已经在使用footer提供有意义语义的 HTML5 元素，为什么要使用ul?

footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 40px;
  grid-column-gap: 5px;
}

a {
  color: #001f3f !important;
  text-decoration: none;
  border: 1px solid lightgray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .9em;
}

<footer>
  <a href="#">A Blah Blah Production</a>
  <a href="#">Phone: xxx-xxx-xxxx</a>
  <a href="#">Email: [e-mail]</a>
  <a href="#">Career Info</a>
</footer>

jsFiddle 演示