목록 스타일은 ...

내가 간단한 설정과 같이이 다음목록 스타일은 ...

ul { list-style: none; } 

    #navigation ul li a { 
    padding: 0px 15px 0px 15px; 
    line-height: 32px; 
    float: left; 
    color: #dedede; 
    font-weight: bold; 
}

그리고 목록을 작동하지 않습니다.

<div id="navigation"> 
    <ul> 
     <li><a href="#">etc</a></li> 
     <li><a href="#">etc</a></li> 
     <li><a href="#">etc</a></li> 
     <li><a href="#">etc</a></li> 
     <li><a href="#">etc</a></li> 
    </ul> 
</div>

의도는 무엇입니까? 목록 항목은 나란히 나란히 렌더링되어야합니다. FireFox, IE8, Chrome 및 Opera의 Hunky Dory.

IE7 (및 6도)은 들쭉날쭉 한 계단 모양으로 표시합니다. 어떤 아이디어?

출처

2010-07-09 Ciel

CSS의 두 번째 선택기 인 'navigation ul li a'가 걱정됩니다. 셀렉터 라인을 주석으로 처리했으나 후속 라인은 본질적으로 유효하지 않은 CSS입니까? 이것이 IE7 (다른 브라우저는 아님)이 CSS를 완전히 버릴 수 있습니까? –

줄을 주석 처리하지 않았습니다. 스택 오버플로 그냥 어떤 이유로 그것을 표시합니다. – Ciel

@Drew :'#'은 CSS 주석이 아닙니다. 그것은 ID 선택 자입니다. [Prettify] (http://code.google.com/p/google-code-prettify/)에서 문제를보고 해주십시오. – BalusC

IE의 경우 li 태그에 display: inline;을 추가해야합니다.

그래서 :

* #navigation ul li { display: inline; }

출처

2010-07-09 17:47:34 Marcin

감사합니다. 그것은 여전히 다른 브라우저가 따르는 박스 - 모델을 무시한다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? – Ciel

이것은 웹 디자이너가 IE를 싫어하는 이유입니다. IE는 조금 다른 상자 모델을 사용합니다. 현재 IE7에서 테스트 중이며 파이어 폭스 3.6에서와 똑같이 보입니다 (코드는 적어도). 내가 오해하고있는 것이 있습니까? 아니면 그와 함께 갈 CSS가 더 있습니까? – Marcin

그래, 그 주위에 CSS가 있지만이 간단한 질문에는 너무 많이 사용됩니다. 내가 사냥을 할 수 있는지 알 겠어. 그래도 IE8에서는 제대로 작동합니다. – Ciel

당신은하지 a 요소에 li 요소에 float를 갖고 싶어. 업데이트 된 CSS는 다음과 같습니다.

#navigation ul li { 
    float: left; 
} 

#navigation ul li a { 
    padding: 0px 15px 0px 15px; 
    line-height: 32px; 
    color: #dedede; 
    font-weight: bold; 
}

출처

2010-07-09 18:12:13 BalusC

목록 스타일은 ...

답변

관련 문제