Html 水平菜单：如何向右浮动但保持菜单项的顺序正确？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20920265/
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
Horizontal menu: how to float right but keep the menu items in the correct order?
提问by Greg
I'm using float: rightfor my horizontal menu (.drop_menu li) as I want the menu to be aligned to the right side of the screen (and logo to the left side). It works OK, the only issue is that my menu items are now in the wrong order (Link 3 then Link 3 then Link 1 instead of the opposite). Is there a way to fix that?
Many thanks
我正在使用float: right我的水平菜单 (.drop_menu li)，因为我希望菜单与屏幕右侧对齐（并且徽标在左侧）。它工作正常，唯一的问题是我的菜单项现在的顺序错误（链接 3 然后链接 3 然后链接 1 而不是相反）。有没有办法解决这个问题？非常感谢
<div class="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
.header {
width: 100%;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
height: 120px;
display: table;
position: fixed;
z-index: 999999;
opacity: 0.7;
background: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}
.drop_menu {
padding:0;
margin:0;
list-style-type:none;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
.drop_menu li { display: table-cell;
vertical-align: middle; float: right;}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
采纳答案by Sachin
Remove float:rightfrom liwhich prevent the reverse order.
float:right从中删除li防止相反的顺序。
Add float:rightto the ul's .dropdownclass which put your entire menu at right side.
添加float:right到.dropdown将整个菜单放在右侧的 ul类。
Add float:leftto the liwhich helps your sub-menu to stay align.
添加float:left到li有助于您的子菜单保持对齐的 。
.drop_menu {
float: right;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
float:left;
}
回答by Kamlesh
Add one more div around menu items and set float to right
在菜单项周围再添加一个 div 并将浮动设置为右侧
<div style='float:right'>
<!-- put menu controls here -->
</div>
Remove float right from following class
从以下课程中删除浮动权
.drop_menu li { display: table-cell;
vertical-align: middle;}
for demo click on jsfiddle link
演示点击jsfiddle链接
回答by Akash
flexsolution:-
flex解决方案：-
This is what worked for me:
这对我有用：
ul {
display: flex;
justify-content: flex-end;
}
ul li {
outline: 2px violet solid;
display: list-item;
list-style: none;
padding: 10px;
margin: 0 5px;
}
ul li:hover {
outline: 2px deeppink solid;
cursor: pointer;
}<div>
<h1>Hello World....</h1>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>Here is the fiddle: https://jsfiddle.net/appsparkler/emjst7f3/4/
这是小提琴：https: //jsfiddle.net/appsparkler/emjst7f3/4/
Good Luck...
祝你好运...
回答by Deepu Sasidharan
Try this...
尝试这个...
.drop_menu li { display: table-cell;
vertical-align: middle; float: left;
}
It results in LINK 1 LINK 2 LINK 3order and reduce the width of submenu links. It works.
它导致LINK 1 LINK 2 LINK 3顺序并减小子菜单链接的宽度。有用。
回答by huntermacd
Float the <ul>to the right, then float its <li>elements to the left.
浮动<ul>的权利，那么它的浮动<li>元素左侧。
