가있는 수직 CSS 혼합 수평

Question

가로 항목이 혼합 된 메뉴를 생성하려고합니다.그것이 메뉴가 어떻게 보이는지입니다.

항목 1 항목 3 항목 5 항목 7
항목 2 항목 4 항목 8 항목 8

내가 시도한 것은 다음과 같은 HTML을 시도했다 :

<menu>  
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</menu>

.

및 css :

.navigation menu {
    float: right;
    margin-top:103px;
    width:683px;    
}
.navigation menu li {
    display:block;
    width: 115px;
    float: none;
    background-image:none;
    text-align:right;
}
.navigation menu li:nth-child(3) {
    float: left;
}
.navigation menu li:nth-child(4) {
    float: none;
}
.navigation menu li:nth-child(5) {
    float: left;
}
.navigation menu li:nth-child(6) {
    float: none;
}

.

그러나 그것은 작동하지 않습니다, 나는 그것이 CSS에 너무 많이 생각합니다 :)

아무도 아이디어를 얻었습니까?어떤 도움을 위해 미리 감사드립니다!

인사말 EST RO

Answer 1

홀수 요소를 떠 다니는 홀수 요소를 유지합니다.

짝수 요소는 너비가 없거나 (마진 - 오른쪽 : -115px) 155 px를 왼쪽에 놓고 왼쪽으로 위치하십시오 :

CSS

.menu {
    float: left;
    margin-top:13px;
    width:683px;    
}
.menu li {
    display:block;
    width: 115px;
    float: left;
    background-image:none;
    text-align:right;
}

.menu li:nth-child(even) {
    position: relative;
    top: 1.2em;
    left: -115px;
    margin-right: -115px;
}

.

바이올린

Answer 2

할 수있는 작업은 메뉴 항목을

로 설정합니다.

width:25%;

.

메뉴 항목 각 항목을 왼쪽으로 띄움을 띄우고 있습니다.다른 모든 것들을 제거 할 수 있습니다.또한 측면이 사용하지 않으면 메뉴 태그가 사용되지 않습니다.:)

jsfiddle

http://jsfiddle.net/eerr7/

갱신 된 바이올린

http://jsfiddle.net/eerr7/2/2/2/A>

Answer 3

이처럼 어떤 것입니까?그것은 조금 녹슨하지만 그것은 당신이 원하는 것을 적합합니다.

약간의 변경 사항을 추가하고

.navigation menu li:nth-child(6) {
    float: none;
}

.

http://jsfiddle.net/jxxu8/2/2/A>