在父div内水平对齐UL项目，两边没有空格？

Question

我正在制作一个导航菜单，遇到了一个常见的问题，即需要在每个列表项周围以相等的间距水平对齐UL。 但是，此列表位于div的内部，该div的宽度设置为1100px，我需要在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的整个宽度？

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>