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

问题描述 投票:0回答:4

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

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

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

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

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

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

css html html-lists zoom listitem
4个回答
1
投票

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

0
投票

请上传您的代码。

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

ul{ width:100%; }

应该这样做。


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

0
投票

谢谢大家的答案!

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.