Смешанный горизонтальный вертикальный CSS с помощью
-
26-12-2019 - |
Вопрос
Я пытаюсь создать меню со смешанным вертикальным горизонтальным элементами.Вот как следует выглядеть меню:
Пункт 1 Пункт 3 Пункт 5 Пункт 7
Пункт 2 Пункт 4 Пункт 6 Пункт 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 :)
У кого-нибудь есть идея?Заранее спасибо за любую помощь!
Приветствуется 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;
}
.