고정 메뉴 폭 - 상품의 유통

Question

나는이 목록 메뉴

<ul> 
<li>item1</li> 
<li>item2</li> 
<li>longitem3</li> 
</ul> 

메뉴 CSS

ul{ 
width:500px; 
} 
li { 
float:left; 
} 

나는 그들이 이런 그들 사이 같은 공간이 것 때문에 자동으로 메뉴에 내 항목을 배포하고 싶습니다

{메뉴 항목} {} {공간} {항목} {공간} {} {메뉴 항목}

는 것이 가능 행 자바 스크립트가 아니라 HTML과 CSS 만 사용하면됩니까? 감사합니다

Answer 1

나는이 같은, 오히려> 모든 < 리튬에 영향을 미치는보다 CSS 클래스를 사용합니다 : CSS를에 관해서는

<li class="menuItem"> 

:

.menuItem { 
    float: left; 
    margin-right: <some number of px>; 
} 
.menuItem:last-child { 
    margin-right: 0; 
} 

을 ' 마지막 자식 '선택기는 이전 정의를 무시하고 마지막 메뉴 항목의 올바른 공간을 제거합니다.

Answer 2

당신의 오른쪽에 여백을 추가 할 수 있습니다 리튬의

li { float:left; margin-right: 5px} 

Answer 3

그냥 각 li 항목의 오른쪽에, 예를 들어, 일부 패딩을 추가

li { 
float:left; 
padding-right:20px; 
} 

Answer 4

ul { 
    text-align: center; 
} 

li { 
    display: inline-block; 
}