목록 - 너비는 항상 100 %입니다.

Question

기본적으로 일부 단추를 만들고 있지만 너비를 자동으로 설정하고 패딩을 설정하더라도 목록은 여전히 ​​페이지의 100 %까지 확장됩니다. 너비를 픽셀 단위로 설정하고 싶지는 않지만, 그냥 양쪽에 패딩을 설정하고 싶습니다. 내가 잘못 갈 곳

사람 설명시겠습니까 : 당신은 목록 요소에 display: inline-block 누락 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

목록 항목은 width 값이 auto과 같기 때문에 block-level elements과 유사하므로 기본적으로 고정 된 크기가 지정되지 않은 경우 포함 된 블록의 너비에 영향을 미칩니다. 값을 float으로 변경하거나 표시 값을 inline-block;으로 변경하여 내용이 내용에 맞게 축소되도록하거나 목록 항목에 고정 폭을 지정할 수 있습니다. 대신 패딩의 마진에 대한 내 이전 코멘트에서

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

Answer 2

. 기본적으로 블록 요소로 렌더링되므로 컨테이너의 너비를 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

, 이것은 당신이 원하는 무엇 - 당신의 #nav li CSS 블록에 display: table;. http://jsfiddle.net/KYdnJ/13/