Question

我无法尝试使用一组li标签来调整我想要的效果。

我有一些基本的HTML

<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

和一些css

.menu
{
 border:solid 2px red;
 width:520px;
}

ul
{
border:solid 1px #e5e5e5;
height:40px;
margin:0 auto;
list-style:none;
width:500px;
}

li{

text-align:center;
display:inline;
margin:10px;

}

我不想为每个元素硬编码li宽度，但我希望li元素占用ul元素的所有可用空间。

我需要更改什么才能获得我想要的结果？

My attempt on jsfiddle

Answer 1

如果我理解你的问题可能必须使用display：table属性。写得像这样：

ul
{
    border:solid 1px #e5e5e5;
    height:40px;
    margin:0 auto;
    list-style:none;
    width:500px;
    display:table;
}

li{
 display:table-cell;
 text-align:center;    
}

选中此http://jsfiddle.net/XmcGh/2/

Answer 2

如果display: table;和display: table-cell;未剪切，则可以使用百分比宽度和浮动。虽然这种情况违背了你的“无硬码宽度”要求。虽然百分比会随各种视口大小而变化。

只有当<li>的数量不变时，这也会有效。

类似的东西：

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

ul {
width: 100%;
}
li {
float: left;
text-align: center;
width: 30%;
}

使用自动宽度与硬编码对齐li标签

2 个答案: