水平ul导航与右侧对齐

Question

我正在尝试创建一个水平导航,它与父元素的右侧对齐.您可以在http://kaffeeprinzen.jag-aelskar.de/上看到导航,其中显示"Espresso".

我的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代码中的最后一项.

有什么提示吗？非常感谢!雅尼斯

Answer 1

尝试浮动ul右边而不是每个li.每个都li可以向左浮动.

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

示例:http://jsfiddle.net/hunter/HsUTQ/

float: right将按顺序将项目浮动到右侧.意思是第一个元素是最右边的,然后是第二个元素,右下角,等等.