Question

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

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

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

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

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

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

Answer 1

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

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

Answer 2

请上传您的代码。

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

ul{ width:100%; }

应该这样做。

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

Answer 4

谢谢大家的答案！

我终于想出了如何做到这一点。由于我正在修改模板而且我的大部分HTML都被隐藏了，因此我的情况变得复杂了。我可以编辑我想要的CSS，然而，我发现我可以使用CSS单独调整每个列表项的宽度，如下所示：

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

，其中wsite-nav-3中的3是列表项的编号。这个，并在CSS中的无序列表属性中删除float-left，但保留在list-item属性中，实现了预期的效果 - 无序列表项现在填满整个div，无论是什么缩放级别。

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

4 个答案: