Question

我希望构成水平菜单的li元素在我的ul元素的宽度上均匀分布。我通常float我的li元素在左侧并添加一些边距。但是，如何将适当的间距从ul元素的左侧延伸到右边缘？

这是[{1}}上的an example jsfiddle of a menu not distributed。

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

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

再次，未经测试，只是键入。

Answer 2

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

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

（Fiddle demo）

如果您向列表中添加更多项目，则需要调整百分比宽度 - 例如，使用四个项目，宽度将为25％。

Answer 3

我有两个答案。

如果您想坚持使用float型号：

您的ul元素需要设置overflow属性（没有此属性，您的ul（或任何包含浮动元素的元素）没有给出高度（这是预期的行为，请注意： http://www.quirksmode.org/css/clearing.html）并因此默认为0的高度 - 如果您为ul / li和正文设置不同的背景颜色，那么您的效果将是{ {1}}似乎无法显示。）

ul

您的ul { text-align: center; width: 300px; overflow: auto; }元素需要设置宽度，否则 - 作为浮动元素 - 它们的宽度将设置为它们包含的任何宽度。我在下面使用了像素，但你也可以使用百分比值。

li

对li元素使用li { float: left; margin: 5px 0 5px 0; width: 100px; text-align: center; }属性（如果不支持旧浏览器）。 IE 7不支持这一点，所以如果你需要广泛的跨浏览器支持它没用，但是它会产生你想要的效果 - 但请确保你删除display:inline-block和</li>标签之间的任何空格否则它们将被计入总宽度，并将显示为元素之间的空格。

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

这里的标记和CSS的工作方式与我认为你要求的方式相同：

标记：

li

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; }元素的左右边距。
如果添加li元素，则必须更改要匹配的百分比宽度（例如，标记中包含四个li元素，您需要将CSS更改为每个宽度为25％。）

Answer 4

我没有清楚地提出你的问题所以我认为你可能想要这个：

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

Answer 5

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

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

5 个答案: