列表 - 宽度始终是100％

基本上我做了一些按钮，但即使通过我把宽度作为自动和设置填充，列表仍然延伸到页面的100％。我不想以像素为单位设置宽度，我只是想在两侧设置填充。列表 - 宽度始终是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; 
}

来源

2013-06-03 Jimmy

设置保证金，所以它是ouside。无需声明，width：auto，除非用于重置。这是块元素的默认值。 –

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

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

来源

2013-06-03 19:28:32 Adrift

好的，我现在看到了，谢谢 – Jimmy

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

来源

2013-06-03 19:26:56 Jon

我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-03 19:33:36

如果我给你的权利，这是你想要的东西 - display: table;你#nav li CSS块。 http://jsfiddle.net/KYdnJ/13/

来源

2013-06-03 19:42:40 Scillon

列表 - 宽度始终是100％

回答

相关问题