Смешанный горизонтальный и вертикальный CSS с <menu> <li>

Question

Смешанный горизонтальный и вертикальный CSS с <menu> <li>

0

Я пытаюсь создать меню со смешанными вертикальными горизонтальными элементами. То, как должно выглядеть меню:

пункт 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 :)

У кого-нибудь появилась идея? Заранее благодарю за любую помощь!

Приветствия Est Ro

user3532637 14 апр. 2014, в 18:10

Источник

Теги:

html

css3

menu

html-lists

3 ответа

1

Что вы можете сделать, это установить пункты меню

width:25%;

на каждом из ваших пунктов меню, а затем просто поместите их влево. Вы можете избавиться от всего остального. Также как сторона не использует тег меню, она устарела. :)

JSFIDDLE

http://jsfiddle.net/eERR7/

ОБНОВЛЕНО FIDDLE

http://jsfiddle.net/eERR7/2/

Shalom Aptekar 14 апр. 2014, в 13:40

0

Привет, большое спасибо! Я уже пробовал это, но проблема в том, что вывод в неправильном порядке (см. Пример меню в моем первом посте). Спасибо за подсказку с устаревшим тегом меню! Я буду менять это как можно скорее :)
user3532637 14 апр. 2014, в 16:35
0

Привет, так что вы можете вместо этого поместить каждый из двух элементов в вашей группе в каждый из li и отметить их и уровень блока. скрипка была обновлена :) Наслаждайтесь!
3066d0 14 апр. 2014, в 16:53
0

Оно работает! Вау, спасибо большое! 45 мин на Stackoverflow и у меня есть 2 идеальных решения, большое спасибо всем, кто работает!
user3532637 14 апр. 2014, в 17:07

Показать ещё 1 комментарий

0

Может, что-то вроде этого? Он немного ржавый, но он подходит мне, что хочешь.

Я добавил некоторые из них и немного изменил

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

http://jsfiddle.net/JXxU8/2/

Phoenix_uy 14 апр. 2014, в 13:50

Ещё вопросы

Привет, большое спасибо! Я уже пробовал это, но проблема в том, что вывод в неправильном порядке (см. Пример меню в моем первом посте). Спасибо за подсказку с устаревшим тегом меню! Я буду менять это как можно скорее :)
Привет, так что вы можете вместо этого поместить каждый из двух элементов в вашей группе в каждый из li и отметить их и уровень блока. скрипка была обновлена :) Наслаждайтесь!
Оно работает! Вау, спасибо большое! 45 мин на Stackoverflow и у меня есть 2 идеальных решения, большое спасибо всем, кто работает!

vals · Accepted Answer · 2014-04-14T14-51-00.000Z

Держите нечетные элементы плавающими влево.

Сделайте четные элементы без ширины (margin-right: -115px) и расположите их 155 пикселей влево и расстояние до апробиции до нижней части:

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;
}

играть на скрипке

Работает отлично! Большое спасибо! Я просто добавил display: block; для измененного поплавка: слева; плавать: правильно; его выровнен на правой стороне.