动态填充导航

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