Html 水平 ul 导航对齐到右侧

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6683570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:33:09  来源:igfitidea点击:

Horizontal ul navigation aligned to the right side

htmlcssnavigationhtml-lists

提问by user731101

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

我正在尝试创建一个与父元素右侧对齐的水平导航。您可以在http://kaffeeprinzen.jag-aelskar.de/上看到导航,上面写着“Espresso”。

My HTML is:

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

My CSS is:

我的 CSS 是:

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

它是这样工作的,唯一的问题是列表中的顺序是错误的。第一项是 html 代码中的最后一项。

Any tips for me? Thanks a lot! Yannis

对我有什么建议吗?非常感谢!雅尼斯

回答by hunter

Try floating the ulright rather than each li. Each lican float left.

尝试浮动ulright 而不是 each li。每个都li可以向左浮动。

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

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

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



float: rightwill 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.

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