CSS - 사용 가능한 모든 spce를 채우기위한 수평 탐색 목록 항목

CSS 사용 가로 목록을 가지며 상위 항목의 사용 가능한 너비를 채우기 위해 모든 목록 항목을 가질 수있는 방법은 무엇입니까?CSS - 사용 가능한 모든 spce를 채우기위한 수평 탐색 목록 항목

나는 왼쪽을 떠 다니고 각각에 약간의 패딩을 적용하고 있지만 전체 너비를 채울 수는없는 것 같습니다. 따라서 오른쪽에 간격을 남겨 둡니다.

잠재적으로 마지막 항목을 플로팅 할 수 있지만 활성 항목 항목의 맨 위에 테두리가 있으므로 탐색 항목의 활성 상태가 틈을 강조 표시합니다. 이것은 격차를 보여줄 것입니다. 테이블로

2011-05-07 David

응? 어떻게이 코드를 작성합니까? 떠 다니는 경우 너비를 지정해야합니다. 부동 요소는 width : 100 %; – robx

취급을 :

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     nav {width: 500px;} 
     nav ul { 
      list-style: none; 
      margin:0; 
      padding:0; 
      display: table; 
      background: red; 
      width: 100%; 
     } 
     nav li { 
      z-index:10; 
      text-align: center; 
      display: table-cell; 
     } 
     nav a { 
      color: #fff; 
      text-decoration: none; 
      padding: 0 10px 0; 
      height: 20px; 
      line-height: 20px; 
      display: block; 
      text-align: center; 
      background: blue; 
     } 
    </style> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Lorem</a></li> 
      <li><a href="#">ipsum</a></li> 
      <li><a href="#">dolor</a></li> 
      <li><a href="#">sit</a></li> 
      <li><a href="#">amet</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

http://jsfiddle.net/SURzu/

출처

2011-05-07 15:46:59 seler

나는 didnt 일을 시도했다 - 나는 아직도 그 격차가있다. 주요 문제는 다른 메뉴 항목이 텍스트 길이가 다를 수 있으므로 각 너비를 줄 수 없다는 것입니다. – David

@ David, 전체 예제를 제공하기 위해 게시물을 편집했습니다. 행운을 빕니다. – seler

감사 작품 perfet - 나는 그것에 영향을 미치는 다른 스타일을했다. – David

CSS - 사용 가능한 모든 spce를 채우기위한 수평 탐색 목록 항목

답변

관련 문제