如何使列表项水平填充 div？答案

【问题标题】：How can I make list items fill up a div horizontally?如何使列表项水平填充 div？
【发布时间】：2013-08-28 04:10:25
【问题描述】：

我有一个 div，在其中有一个无序列表，其中包含几个用作导航菜单项的列表项。将鼠标悬停在列表项上时，会将某种背景颜色与列表中的其他项不同。我想知道如何确保列表项始终水平完全填充 div，无论缩放级别如何。目前，当我以 100% 缩放查看页面时，列表项完全填满了导航 div（最后一个列表项和 div 的右边框之间没有空白），但是当我缩小时，会出现一个空白区域最后一个列表项的右侧。

理想情况下，我想使用 CSS 来做到这一点。我应该调整 CSS 中的哪些属性，以确保 div 和列表项占用的空间在我放大或缩小时始终以相同的速度缩小或扩大？

我自己看不到HTML代码（我正在修改模板），这也意味着我无法单独设置每个列表项的宽度，但是无序列表的CSS如下所示：

#navigation ul {
width: 100%;
resize: vertical;
}

#navigation li {
float: left;
position: relative;
resize: vertical;
}

我添加了 resize:vertical 和 float:left 作为我努力使无序列表始终跨越 div 的宽度的一部分。如您所见，无序列表的宽度已经设置为 100%，但它不会填充 div，除非以 100% 缩放查看页面。如果没有其他方法，有没有办法让用户在页面上放大或缩小时不调整 div 或菜单项的字体？

【问题讨论】：

使用左浮动...但是如果不提供您的代码，则无法正确回答
如果我正确理解您的问题，请尝试使用 ems 而不是像素作为字体大小，使用 ems 作为 div

标签： css html html-lists zooming listitem

【解决方案1】：

ul li{
  display:inline-block;
  margin-right:10px;
}

<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Impressum</li>
</ul>

【讨论】：

【解决方案2】：

请上传您的代码。

但是，如果我的理解是正确的，那么将无序列表的宽度设置为 100%，如果应该跨越 div 的整个长度。

ul{ width:100%; }

应该可以的。

【讨论】：

我试过这个。但是，当我缩小页面时，列表项的字体大小会缩小，它们不再填满 div。
使用 em 设置字体大小，而不是 px，例如。 ul li{font-size:2em;}

【解决方案3】：

我会为列表元素li 使用百分比宽度。这是我过于简单化的 jsFiddle：http://jsfiddle.net/XT3gU/

将ul 的宽度设置为 100%。将 100 除以列表项的数量。我用了 4，所以 100/4 = 25。

如果您的百分比值等于每个 161.75 像素，则您需要注意亚像素舍入问题。

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    width: 100%;
}
li {
    float: left;
    width: 25%;
}
li:hover {
    background-color: #DEDEDE;
}

【讨论】：

谢谢。我试过这个，但问题是我的列表项的长度变化很大（有些包含两个单词），所以给每个相同百分比的 div 宽度会使较短的看起来孤独，而较长的则蔓延到两行在某些情况下。我现在正在努力思考还有什么可以做的。
您可以单独定位每个li。您很可能必须将每一个设置为指定的宽度，最终总计为 100%。 15% + 35% + 20% + 30% = 100%。使用百分比将为您提供您正在寻找的缩放功能。像素宽度不会缩放。
我会试试这个，也会使用 ems 的 div。
不确定我是否会为您的 DIV 使用 em，因为它们是基于字体大小的。字体并不总是在每个浏览器中呈现完全相同的大小。
很多 HTML 代码对我来说是隐藏的，所以我只能编辑它。我尝试将无序列表的宽度设置为 100%，但是当我缩小页面时这似乎不起作用，因为列表项中的字符仍然变小。有没有办法阻止列表项的字体调整大小，以便字体在所有缩放级别看起来都一样？不调整大小是列表项、列表还是包含 div 的属性？

【解决方案4】：

感谢大家的回答！

我终于想出了如何做到这一点。我的情况很复杂，因为我正在修改一个模板，而且很多 HTML 对我来说是隐藏的。但是，我可以编辑所有我想要的 CSS，我发现我可以使用 CSS 单独调整每个列表项的宽度，如下所示：

#navigation .w-menu-item.wsite-nav-3 {
width: 5%;
}

，其中 wsite-nav-3 中的 3 是列表项的编号。这样，在 CSS 中去掉了无序列表属性中的 float-left，但将其保留在列表项属性中，达到了预期的效果——无序列表项现在填满了它们的整个 div缩放级别。

【讨论】：