Float CSS ul навигации прямо без повторного заказа - PullRequest
1 голос
/ 17 октября 2011

Я использую эту навигацию jquery: http://css -tricks.com / 5582-jquery-magicline-navigation /

Я бы хотел, чтобы навигация всплывала вправо, без изменения порядка (например, дом, контакт становится контактом, дом). К сожалению, я получил некоторые странные результаты, когда я устал - вы можете увидеть на этом снимке экрана, который я загрузил:

http://postimage.org/image/1idig02pw/

Оригинальный код:

#navstyle {
list-style:none;
position:relative;
width:960px;
margin:0 auto
}

#navstyle li {
display:inline-block
}

#navstyle a {
color:#bbb;
font-size:14px;
float:left;
text-decoration:none;
text-transform:uppercase;
padding:6px 10px 4px
}

#navstyle a:hover {
color:#FFF
}

#magic-line {
position:absolute;
bottom:-2px;
left:0;
width:100px;
height:2px;
background:#fe4902
}

.current_page_item a {
color:#FFF!important
}

.ie6 #navstyle li,.ie7 #navstyle li {
display:inline
}

HTML: UL обернут в div "nav-wrap". Класс UL - это «группа» с идентификатором «navstyle». Текущая страница home имеет класс li "current_page_item".

Это код, который я изменил, чтобы заставить его плавать правильно:

.nav-wrap {
float:right;
width:100%;
font-size:1em;
margin-top:108px;
position:relative
}

#navstyle {
list-style:none;
float:right;
display:inline-block;
margin:0
}

#navstyle li {
display:inline-block
}

Есть идеи, что я делаю не так? Буду очень признателен за любую помощь! :)

1 Ответ

1 голос
/ 17 октября 2011

Вы можете перемещать оставленные элементы списка, только если хотите сохранить порядок.Если вы хотите, чтобы все было справа, просто введите <ul>, прямо вместо этого.

...