动态填充导航

Question

我的响应式导航中包含许多链接。

从历史上看，我们已经分别为每个<li>设置了宽度。

但是，我想将导航上的链接间隔均匀地填充包含<ul>的整个宽度。

有一种很好的方法可以做到这一点，最好不要使用Javascript。

Answer 1

最简单的方法之一是使用表格单元格布局......不，不是实际的表格，而是......

JSfiddle

<强> CSS

* {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}

ul{
    width:100%;
    display: table;
}
li{
    display: table-cell;
    height:50px;
    border:1px solid grey; /* visual reference only */
    background:#bada55; /* visual reference only */
    list-style-type:none;
}