如何在无序列表中均匀分布HTML列表项

Question

我希望我的水平菜单由 li 元素组成，能够均匀分布在 ul 元素的宽度上。通常我会将 li 元素向左浮动并添加一些边距。但是如何设置适当的间距，使它们从 ul 元素的左侧延伸到右边缘呢？

这里是一个 未均匀分布的菜单示例 jsfiddle。

每个 li 之间的间距必须相同。但是 li 元素的长度可能不同。

- at.

Answer 1

另一种方法。当我尝试将菜单均匀地跨越整个页面时，我会使用这种方法。如果您有一个动态菜单，它将根据某些条件（例如仅在登录为管理员时显示的管理页面）更改，则非常好用。

CSS：

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

我有点懒，只是从我的当前项目中复制了这个内容，所以你需要根据自己的代码进行调整，但这是我首选创建水平菜单的方法。

编辑：您可以通过添加以下内容使其看起来更好：

CSS：

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

再次强调，未经测试，仅为打字。

- FireCrakcer37

---

我不得不将 nav 的 display 属性设置为 table，将 ul 的 display 属性设置为 table-row，将 li 的 display 属性设置为 table-cell，然后一切都运行得非常好。 - at.

我在Chrome中测试了它，然后将其移入我的Evernote片段库 :) 感谢@FireCrakcer37，这是一些非常棒的CSS。 - fusion27

我使用上述代码创建了一个名为“distributed-navigation”的类。在使用此类时，我还覆盖了导航的宽度，使得导航元素比其父元素更宽。这样，您就不必左/右对齐“li:first/last-child”。我调整了导航的位置。例如：“nav {width: 932px; position:relative; left:-6px;}”。现在我的导航超出了其包含元素的宽度，但是第一个和最后一个“li”都与我的主块的左/右边框完美对齐。每个项目看起来都正确地对齐了。 - Webdevotion

Answer 2

您需要设置li元素的宽度以强制它们填充空间：

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

(演示版)

如果你要添加更多项到列表中，你需要调整百分比宽度 - 比如有四个项目，宽度将会是25%。

- whostolemyhat

---

不，那样行不通。每个 li 之间的间距必须相同。 - at.

Answer 3

我有两个答案给你。

如果你想坚持使用float模型：

你的ul元素需要设置overflow属性（如果没有这个属性，你的ul（或包含浮动元素的任何元素）将不会被赋予高度（这是预期的行为，要知道：http://www.quirksmode.org/css/clearing.html），因此默认高度为0 - 这样做的效果是，如果你为ul/li和body设置不同的背景颜色，则ul的背景看起来似乎不会显示)。

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

您的li元素需要设置宽度，否则作为浮动元素，它们的宽度将被设置为其所包含内容的宽度。下面我使用了像素，但您也可以使用百分比值。

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

使用display:inline-block属性来设置li元素（如果不需要支持旧浏览器）。IE 7不支持此属性，因此如果您需要广泛的跨浏览器支持，则无用，但它可以创建您想要的效果-请确保删除</li>和<li>标签之间的任何空格，否则它们将被计算在总宽度中，并显示为元素之间的空格。

这种方法的一个优点是，如果您在包含的li元素上使用百分比宽度，则不必知道或设置容器ul的宽度，您仍然可以通过已有的text-align属性获得免费的居中。这使得您的布局非常响应灵敏。

以下是我认为符合您要求的标记和CSS：

标记：

<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>

CSS：

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}

• 如果您更喜欢在多行上保留标记，则必须在CSS中调整li元素的左右边距。
• 如果您添加了li元素，则必须更改百分比宽度以匹配（例如，在您的标记中有四个li元素时，您需要更改CSS，使每个元素的宽度为25％）。

- Matt Wagner

Answer 4

Html：

 <ul>
    <li>1</li>
    <li>2 <br>4</li>
    <li>3</li>
</ul>

Css：

ul {
    list-style: none;
    font-size: 0;
    text-align: justify;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    font-size: 100px;
    display: inline-block;
}

codepen

的英译中文为：

{{链接1：codepen}}

。

- olly

---

这是正确的解决方案...关键在于对齐 :) 很好的答案。 - Tom Shaw

Answer 5

我没有很清楚地理解你的问题，所以我假设你可能想要这个：

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}

- Wilf

---

那似乎使菜单垂直（上下）。我想要一个水平菜单，其中元素之间具有相同的间距。 - at.