0

我有一个 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 或菜单项的字体不调整大小？

4

4 回答 4

1 

ul li{
  display:inline-block;
  margin-right:10px;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Impressum</li>
</ul>

于 2019-03-22T14:11:13.347 回答
0

请上传您的代码。

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

ul{ width:100%; }

那应该这样做。

于 2013-08-28T04:22:29.643 回答
0

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

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

如果您的百分比值等于每个 161.75px 之类的值，则您需要密切关注子像素舍入问题。

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;
}
于 2013-08-28T04:37:08.723 回答
0

谢谢大家的回答！

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

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

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

于 2013-09-04T15:13:39.623 回答