水平 ul 导航与右侧对齐

Posted 2023-04-13

【中文标题】水平 ul 导航与右侧对齐

【英文标题】：Horizontal ul navigation aligned to the right side

【发布时间】：2011-10-04 17:50:15

【问题描述】：

我正在尝试创建与父元素右侧对齐的水平导航。您可以在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 代码中的最后一项。

对我有什么建议吗？非常感谢！ 雅尼斯

【参考方案1】：

尝试将ul 向右浮动，而不是每个li。每个li 都可以向左浮动。

#menu-standard  
    float: right;


#menu-standard li  
    float: left;

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

---

float: right 会将项目按顺序向右浮动。这意味着第一个元素将是最右边的，然后是第二个最右边的元素，依此类推。

【讨论】：

嗨，谢谢，但这正是我的问题。我可以使用 float:left;但随后它与左侧对齐 - 而不是右侧，不再适合我的设计......

我的 jsfiddle 有错别字，请查看我的更新，一切随您的喜好浮动。

你是我的英雄。多谢！它完美无缺！祝你有美好的一天！

@user731101：如果它解决了您的问题，请将答案标记为“已接受”。