CSS 가로 목록 항목

Question

그래서 저는 설계중인 새 웹 사이트에서 사용할 가로 목록을 만들려고했습니다. 나는 'float'을 왼쪽으로 설정하는 것과 같이 이미 온라인에서 발견 된 여러 가지 제안을 시도해 보았습니다. 그러나 문제를 해결하는 데는 이들 중 어느 것도 효과가 없었습니다.

ul#menuItems { 
 
     background: none; 
 
     height: 50px; 
 
     width: 100px; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    ul#menuItems li { 
 
     display: inline; 
 
     list-style: none; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     top: 0px; 
 
     height: 50px; 
 
    } 
 
    ul#menuItems li a { 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     text-decoration: none; 
 
     font-weight: bolder; 
 
     color: #000; 
 
     height: 50px; 
 
     width: auto; 
 
     display: block; 
 
     text-align: center; 
 
     line-height: 50px; 
 
    }

<ul id="menuItems"> 
 
    <li> 
 
    <a href="index.php">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="index.php">DJ Profiles</a> 
 
    </li> 
 
</ul>

현재 내가 대해 어떻게 갈 것이며,이를 해결이 문제의 원인이 무엇 확신입니까?

Answer 1

업데이트 답변

나는 그것을 조금을 업데이트하기로 결정 그래서 많은 사람들이 응답을 사용 나타났습니다. 원래 답변을 보려면 아래를 확인하십시오. 새로운 대답은 목록에 스타일을 추가하는 방법을 보여줍니다.

ul > li { 
 
    display: inline-block; 
 
    /* You can also add some margins here to make it look prettier */ 
 
    zoom:1; 
 
    *display:inline; 
 
    /* this fix is needed for IE7- */ 
 
}

<ul> 
 
    <li> <a href="#">some item</a> 
 

 
    </li> 
 
    <li> <a href="#">another item</a> 
 

 
    </li> 
 
</ul>

Answer 2

훨씬 더 좋은 방법은 더 이상 목록의 마지막에 clear:both를 사용할 필요가 없기 때문에, inline-block을 사용하는 것입니다.

이 시도 :

<ul> 
    <li> 
     <a href="#">some item</a> 
    </li> 
    <li> 
     <a href="#">another item</a> 
    </li> 
</ul> 

CSS : http://jsfiddle.net/shahverdy/4N6Ap/이

Answer 3

이 바이올린은 어떻게

http://jsfiddle.net/9th7X/

을 보여줍니다

ul > li{ 
    display:inline-block; 
} 

는 여기에서보세요 목록 여기 CSS에 0

ul, li { 
    display:inline 
} 

위대한 참조 :

http://alistapart.com/article/taminglists/

Answer 4

당신은 또한 같은 요소

<ul> 
    <li> 
     <a href="#">some item</a> 
    </li> 
    <li> 
     <a href="#">another item</a> 
    </li> 
</ul> 

다음 스타일 부동 방지하기 위해 인라인 블록을 사용할 수

li{ 
    /* with fix for IE */ 
    display:inline; 
    display:inline-block; 
    zoom:1; 
    /* 
    additional styles to make it look nice 
    */ 
} 

을

그런 식으로 플로트해야 할 필요가 없습니다. 명확한 수정이 필요합니다

Answer 5

Here 목록의 동적 크기 조정에 대한 몇 가지 제안 사항이있는 실제 예제를 찾을 수 있습니다.

I 디스플레이 사용했습니다 :

display:inline-block; 
padding:10px 1%; 
width: 30% 

플러스 두 개 더 규칙은 첫 번째와 마지막 항목에 대한 패딩을 제거 : 상위 목록을 동적으로 크기를 변경할 수 있도록 인라인 블록 및 백분율 패딩을.

ul#menuItems li:first-child{padding-left:0;} 
ul#menuItems li:last-child{padding-right:0;}