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

正如我所说，这个无序列表位于另一个宽度设置为 1100px 的div 内部。我应该怎么做才能使列表拉伸div 的整个宽度？

Answer 1

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

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

小提琴

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>

Answer 2

猜测你的标记看起来像这样。

ul {
  width: 100%;
  display: table;
  list-style-type: none;
  padding: 0;
  border-spacing: 5px;
  border: 1px solid black;
}
li {
  display: table-cell;
  padding: 0 30px;
  text-align: center;
  background-color: #EDEDED;
  border: 1px solid black;
}
#container {
  width: 1100px;
  margin: 0 auto;
}

<div id="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>