拉伸列表项<li>以填充<ul> </ul> </li>的宽度

时间:2012-11-15 11:59:48

标签: css

我有一个无序列表(<ul>),其中包含不同数量的项目(<li>)。我想使用一个CSS样式,允许项目拉伸到列表的宽度。

这就是我所拥有的:

enter image description here

这就是我想要的:

enter image description here

HTML:

These 4 items should fill the width:<br/>
<ul id="ul1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
These 5 items should fill the width:<br/>
<ul id="ul2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
And so on and so forth...

这是让你入门的JSFiddle

注意:我不想hard-code the width in CSS。 注意:如果您想知道用例,这是响应式设计中的导航结构,我希望列表项总是填满可用的宽度,无论分辨率是多少。

5 个答案:

答案 0 :(得分:38)

<强> Demo 你现在可以这样做

用于 display :tabledisplay:table-cell

就像这样

<强>的CSS

ul {
    border:1px dotted black;
    padding: 0;
    display:table;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
li {
    background-color: red;
    display:table-cell;
}
li:nth-child(2n) {
    background-color: #0F0;
}

现在定义您的父级 display:table;width:100%;定义您的孩子 display:table-cell;

<强> Demo

答案 1 :(得分:5)

使用

轻松解决问题
ul {
    display: flex;
}

ul li {
    width: 100%;
}

答案 2 :(得分:2)

最简单的方法:

pathname

有关 ul { display: flex; } ul li { /*this instruction means "To split space between all 'li' elements evenly*/ flex: 1; } 属性的更多详细信息,您可以阅读 here

答案 3 :(得分:1)

我得到了最简单的解决方案。 <ul style="padding: 0;"> <li style="list-style-type: none;margin:0;"></li> </ul>

答案 4 :(得分:0)

#ul1 {
display: block;
padding: 0;
list-style: none;
}

li-Class{
width: 100%
}

注意:显示可以是内联块,宽度为:100%,此代码适用于那些希望以明智方式排列li的人。