水平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会按顺序将项目浮动到右侧。意思是第一个元素是最右边的，然后是第二个元素，右下角等等。