Горизонтальная навигация ul выровнена по правой стороне - PullRequest
Новая
       21

Горизонтальная навигация ul выровнена по правой стороне

9 голосов
/ 13 июля 2011

Я пытаюсь создать горизонтальную навигацию, которая выровнена по правой стороне родительского элемента. Вы можете увидеть навигацию по адресу http://kaffeeprinzen.jag -aelskar.de / , где написано "Эспрессо".

Мой HTML-код: 

<ul id="menu-standard">
    <li id="menu-item"><a>Item 4</a></li>
    <li id="menu-item"><a>Item 3</a></li>
    <li id="menu-item"><a>Item 2</a></li>
    <li id="menu-item"><a>Item 1</a></li>
</ul>

Мой код CSS: 

.menu li { 
    float: right;
    margin-left: 20px;
}

Это работает так, единственная проблема в том, что порядок в списке неправильный. Первый элемент является последним в HTML-коде.

Какие-нибудь советы для меня? Большое спасибо! Яннис

1 Ответ

20 голосов
/ 13 июля 2011

Попробуйте плавать ul вправо, а не каждый li.Каждый li может перемещаться влево. 

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

Пример: http://jsfiddle.net/hunter/HsUTQ/

float: right будет перемещать элементы по порядку вправо.Значение 1-го элемента будет самым правым, затем 2-й элемент последним правым и т. Д.

...