水平 ul 导航与右侧对齐

发布于 2024-11-24 03:34:51 字数 675 浏览 1 评论 0原文

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

有什么建议给我吗？多谢！雅尼斯

原文

i'm trying to create a horizontal navigation which is aligned to the right side of the parent element. You can see the navigation at http://kaffeeprinzen.jag-aelskar.de/ where it says "Espresso".

My HTML is:

<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>

My CSS is:

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

It works like this, the only problem is that the order in the list is wrong. The first item is the last one in the html code.

Any tips for me? Thanks a lot!
Yannis

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半枫 2024-12-01 03:34:51

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

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

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

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

Try floating the ul right rather than each li. Each li can float left.

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

Example: http://jsfiddle.net/hunter/HsUTQ/

float: right will float the items, in order, to the right. Meaning the 1st element will be the right-most, then 2nd element the next-right-most, etc.

回复收藏 0 原文

~没有更多了~