2

基本上我正在制作一些按钮，但即使我将宽度设置为自动并设置填充，列表仍然会扩展 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;
}
4

4 回答 4

5

列表项类似于块级元素，因为它们的初始width值等于 auto您可以浮动或更改显示值以inline-block;使其宽度“缩小以适应”其内容，或者您​​可以只为列表项提供固定宽度。

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

于 2013-06-03T19:28:32.420 回答
3

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

于 2013-06-03T19:26:56.447 回答
1

我之前关于保证金而不是填充的评论中的 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;
}
于 2013-06-03T19:33:36.337 回答
1

如果我说对了，这就是你想要的 -display: table;在你的#nav licss 块上。 http://jsfiddle.net/KYdnJ/13/

于 2013-06-03T19:42:40.143 回答