문제
가로 항목이 혼합 된 메뉴를 생성하려고합니다.그것이 메뉴가 어떻게 보이는지입니다.
항목 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
해결책
홀수 요소를 떠 다니는 홀수 요소를 유지합니다.
짝수 요소는 너비가 없거나 (마진 - 오른쪽 : -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;
}
.
다른 팁
할 수있는 작업은 메뉴 항목을
로 설정합니다.width:25%;
.
메뉴 항목 각 항목을 왼쪽으로 띄움을 띄우고 있습니다.다른 모든 것들을 제거 할 수 있습니다.또한 측면이 사용하지 않으면 메뉴 태그가 사용되지 않습니다.:)
jsfiddle
갱신 된 바이올린
이처럼 어떤 것입니까?그것은 조금 녹슨하지만 그것은 당신이 원하는 것을 적합합니다.
약간의 변경 사항을 추가하고
.navigation menu li:nth-child(6) {
float: none;
}
.
제휴하지 않습니다 StackOverflow