我正在制作一个导航菜单,并遇到了一个常见问题,即需要在每个列表项周围以相等的间距水平对齐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;
            }
        }


正如我所说的,此无序列表位于另一个div内,其宽度设置为1100px。我应该怎么做才能使列表延伸div的整个宽度?

最佳答案

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

2)使用伪元素将列表项拉伸到列表宽度的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>

07-24 09:44
查看更多