html - 水平对齐父 div 中的 UL 元素，两边都没有空格？

Question

我在制作导航菜单时遇到了一个常见问题，即需要在每个列表项周围水平对齐 UL 且间距相等。但是，此列表位于宽度设置为 1100px 的 div 内，我需要 div 的左侧或右侧没有空间——第一个和最后一个列表项需要到达 div 的它们的一侧.

这是我现在拥有的无序列表:

ul{
            width:100%;
            display:table;
            list-style-type:none;
            padding:0;
            border-spacing:5px;
            li{
                display:table-cell;
                padding:0 30px;
            }
        }

正如我所说，这个无序列表位于另一个宽度设置为 1100 像素的 div 中。我应该怎么做才能使列表拉伸(stretch)到 div 的整个宽度？

Answer 1

1) 在容器上设置text-align:justify

2) 使用伪元素将列表项拉伸(stretch)到列表宽度的 100%

FIDDLE

ul {
  width: 800px;
  text-align: justify;
  list-style-type: none;
  padding: 0;
  background: yellow;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
li {
  display: inline-block;
  padding: 0 30px;
  text-align: center;
  background: tomato;
}

<div id="explore-nav">
  <ul>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </ul>
</div>