html - html列表项(li)可以设置显示: grid?吗

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: support@company.com</li>
        <li class="footer_list_item" href="#">Career Info</li>
    </ul>
</footer>

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

将 list 设置为 display:grid 无效吗？由于所有元素似乎都是随机间隔的

Answer 1

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

根据 W3C 定义，the display property applies to all elements .

但是，随着 display 属性的改变，某些元素在某些浏览器中无法正常播放。请参阅此帖子(适用于 flex 和网格):Flexbox not working on button or fieldset elements

你写道:

Is setting a list to display: grid invalid? As all of the items seem to be randomly spaced.

您的元素不是随机排列的。网格有四个等宽的列，就像您指定的那样:

您的代码:

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

您的布局(如 Chrome、Firefox 和 Edge 中所示):

所以我不确定你的意思。但这是您的代码的简化版本。由于您已经在使用 HTML5 footer元素，提供有意义的语义，为什么 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: support@company.com</a>
  <a href="#">Career Info</a>
</footer>

jsFiddle demo