웹 브라우저가 내 메뉴 옵션을 뒤집어 놓은 이유는 무엇입니까?

주 메뉴가 있으며 HTML 코드에서 올바른 순서로 표시되지만 브라우저에서 볼 때 반대입니다. 왜?웹 브라우저가 내 메뉴 옵션을 뒤집어 놓은 이유는 무엇입니까?

HTML :

<div class="header"> 
    <img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" /> 
    <ul class="menu"> 
     <li class="current"><a href="index.php">Home</a></li> 
     <li><a href="services.php">Services</a></li> 
     <li><a href="support.php">Support</a></li> 
     <li><a href="contact.php">Contact Us</a></li> 
     <li><a href="myaccount/">My Account</a></li> 
    </ul> 
    </div>

CSS :

.header{ 
    width: 100%; 
    height: 30px; 

    background-color: #1D242D; 
} 
.logo{ 
    padding: 5px 0 0 5px; 
    float: left; 
    } 
.menu{ 
    float: right: 
} 
li{ 
    display: inline; 
    list-style: none; 
    float: right; 
    padding: 5px 5px 7px 5px; 

}

스크린 샷 :

enter image description here

출처

2011-03-13 Anonymous

동작이 어떤 브라우저/버전입니까? 그리고 명확히하기 위해, 당신은 가정, 서비스, 지원, 연락처, 내 계정을 볼 것으로 기대하지만이 반대가 정확한지 알고 있습니까? – MikeCov

당신이 가지고있는 LI의 떴다 다음 #menu 잘 떠 권리뿐만 아니라, 오른쪽에서 왼쪽으로 배치됩니다. float : 시도해보십시오. 아마 #menu와 LI 중 하나에서 float 특성없이 시도해보십시오.

출처

2011-03-13 03:57:21

LI 'S에서 float : right를 제거했지만 전체 메뉴가 창 왼쪽으로 나옵니다. 그리고 그래, 알아,하지만 전에이 문제가 없었어요. 모든 것은 지금 당장 f ***** g 인 것처럼 보이고, 나는 다르게 아무것도하지 않을 것입니다. (그 외의 경우, 리의 오른쪽을 떠 다니는 것, 나는 단지 메뉴 1을 가지고 왜 그럴 수 없는지를 보았습니다) –

@Lucifer - 당신의 페이지에 대한 링크를 제공 할 수 있다면 도움이 될 것입니다. 코드에있는 모든 LI를 페이지에 띄우고 있기 때문에 다른 일을 잘못하고있는 것 같습니다. Btw, 이와 같은 특정 문제의 요소 유형에 스타일을 적용하면 안됩니다. 대신 클래스와 CSS 선택기를 사용하십시오 (예 :'#menu li'). –

@ 루시퍼, 나는 [Jazz Fiddle] (http://jsfiddle.net/davidThomas/6fM6E/)을 작성하여 @ Jared 's와 일치하는 것으로 보이는 내 대답을했습니다. 그것이 당신이 원하는 것인지보십시오. –

목록 요소에 float: right을 말했기 때문에 그들은 당신이 말한대로 정확하게하고 있습니다. li 요소를 display: inline으로두고 float 선언을 제거하면 올바른 순서로 나타나야하며 메뉴 자체는 여전히 오른쪽으로 플로팅됩니다.

작동하려면 다음과 같이하십시오 (a 요소의 색이 바래고, 파랗고 검은 색이어서 시도하고 읽는 것이 힘들었습니다) : JS Fiddle.

출처

2011-03-13 03:57:57

각 목록 항목 <li>이 떠 다니고 있습니다. 이렇게하면 각 새 목록 항목이 이전에 이동 된 항목의 왼쪽에 나타납니다.

출처

2011-03-13 03:59:03

float : 동일한 상자 요소 내에서 오른쪽 요소는 이전에 오른쪽으로 플로팅 된 요소의 왼쪽에 나중에 추가 된 요소를 넣습니다. Jared의 제안이 마음에 들지 않으면 반대 순서로 추가 할 수 있습니다.

출처

2011-03-13 03:59:40

CSS를 사용하여 항목을 올바르게 떠올리게 할 때 페이지의 오른쪽에 나열된 순서대로 첨부됩니다.

이 경우 '홈'이 페이지 오른쪽에 연결되면 '서비스'가 가능한 한 맨 오른쪽에 연결됩니다 ('홈'의 왼쪽에 위치).

(예상되는 동작이므로) 목록의 순서를 반대로하거나, 오른쪽으로 떠있는 하나의 div에 전체 목록을 넣어야합니다.

출처

2011-03-13 04:00:27

웹 브라우저가 내 메뉴 옵션을 뒤집어 놓은 이유는 무엇입니까?

답변

관련 문제