伸展清单项目< li>填充< ul>的宽度 [英] Stretch list items <li> to fill the width of <ul>

问题描述

我有一个无序列表（< ul> ），其中包含各种项目（< li> ） 在里面。我想使用一种CSS样式，使项目可以扩展到列表的宽度。

I have an unordered list (<ul>) with various number of items (<li>) in it. I want to use one CSS styling that allows the items to stretch to the width of the list.

这就是我所拥有的：

这就是我想要的：

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 入门。

注意：我不想对CSS中的宽度进行硬编码。
注意：如果您想知道用例，那么这是响应式设计中的导航结构，我希望列表项始终填充可用宽度，而不管分辨率是多少。

Note: I don't want to hard-code the width in CSS. Note: If you are wondering about the use-case, this is a navigation structure in a responsive design and I want the list items to always fill up the available width no matter what is the resolution.

推荐答案

演示
现在您可以执行此操作

Demo HI now you can do this

用于 display：table 和 display：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％; 并定义您的孩子 显示： table-cell;

演示

这篇关于伸展清单项目< li>填充< ul>的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！