Question

我正在制作导航菜单，并且遇到了需要在每个列表项周围水平对齐UL等间距的常见问题。但是，这个列表在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％

<强> 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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: