可以将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: 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

请勿在{{1​​}}中使用“ href”

我不知道到底是怎么回事，但这可能对您有帮助-

<li>

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

}
#footer_list{
    display:inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    list-style-type: none;
}
.footer_list_item{
    color: #001f3f !important;
}
.footer_list_item a {
     word-break: break-all;
}

http://jsfiddle.net/qhv40j1d/

Answer 2

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

根据W3C的定义the display property applies to all elements。

但是，更改了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中可见）：

所以我不确定您的意思。但是，这是代码的简化版本。由于您已经在使用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