水平对齐父 div 中的 UL 项目，两边都没有空格？

Posted 2023-04-13

【中文标题】水平对齐父 div 中的 UL 项目，两边都没有空格？

【英文标题】：Horizontally align UL items within parent div with no space on either side?

【发布时间】：2015-01-30 08:08:24

【问题描述】：

我正在制作一个导航菜单，但遇到了一个常见问题，即需要在每个列表项周围以相等的间距水平对齐 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 中。我应该怎么做才能使列表拉伸 div 的整个宽度？

【问题讨论】：

你能在小提琴中重现你的问题吗？

你是这样设置的吗？ jsfiddle.net/abhitalks/q4peetcj我假设您希望第一个和最后一个项目与 div 齐平？

是的，正要分享这个：jsfiddle.net/9k211ppj/1

我希望它们与 div 齐平，左侧或右侧没有额外的间距，是的 @abhitalks

它们已经被刷新。看到红色边框，它们已经延伸到蓝色 div 的末尾了。

【参考方案1】：

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>

【参考方案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>