Question

基本上我正在制作一些按钮，但即使通过我将宽度设置为自动和设置填充，列表仍然延伸100％的页面。我不想以像素为单位设置宽度，我只想在任一侧设置填充。

任何人都可以解释我出错的地方： http://jsfiddle.net/spadez/KYdnJ/5/

#nav li { 
    color: #333; 
    line-height: 28px; 
    background-color: #F8F8F8; 
    border: 1px solid #D3D3D3; 
    padding: 0px 9px 0px 9px; 
    font-family: arial, sans-serif; 
    font-size: 11px; 
    width: auto;
}

Answer 1

列表项类似于block-level elements，因为它们的初始width值等于auto所以默认情况下，如果没有给出它们，它们将跨越其包含块的宽度固定大小。您可以浮动或将显示值更改为inline-block;，以使其宽度“缩小以适合”其内容，或者您可以只给列表项目固定宽度。

http://jsfiddle.net/KYdnJ/8/

Answer 2

您在列表元素上缺少display: inline-block。默认情况下，它们被渲染为块元素，这意味着它们占据了容器宽度的100％。

Answer 3

我之前关于保证金而非填充的评论中的2美分： http://jsfiddle.net/GCyrillus/KYdnJ/9/

* {
    list-style: none;
}

#nav li {
    color: #333;
    line-height: 28px;
    background-color: #F8F8F8;
    border: 1px solid #D3D3D3;
    margin: 0px 9px 0px 9px;
    font-family: arial, sans-serif;
    font-size: 11px;
    width: auto;
}

#label {
}

#strong {
    font-weight: bold;
}

Answer 4

如果我说得对，那就是你想要的 - display: table; css块#nav li。 http://jsfiddle.net/KYdnJ/13/

清单 - 宽度始终为100％

4 个答案: