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