Html 如何将此导航栏向右移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14763702/
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
how to move this navigation bar to the right
提问by elmify
I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.htmlHere's the code:
我是 CSS 新手，我正在尝试使用此代码 - 如果您想查看它的外观，请访问此链接：https: //www.servage.net/blog/wp-content/uploads/2009 /03/css-menu.html代码如下：
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Small Chair</a></li>
<li><a href="">Shiny Shelf</a></li>
<li><a href="">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
我对此有 2 个问题：如何在页面右侧制作此导航栏？一些选项卡有下拉列表，当我添加这个 margin-top: 50px 来改变导航栏的位置时，下拉列表像这样向下移动
回答by Olaf Dietsche
To move the #menuto the right and 50pxdown, add these properties
要#menu向右和50px向下移动，请添加这些属性
#menu {
position: absolute;
top: 50px;
right: 0px;
}
If you want to use floatand margin-topinstead, you must restrict the margin to the #menu
如果要使用float和margin-top代替，则必须将边距限制为#menu
#menu {
float: right;
margin-top: 50px;
}
回答by mika
you seem to be targeting both the parent ul and the childs uls
你似乎同时针对父 ul 和孩子的 ul
try that:
试试看：
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
通过在 ul 之后添加 #menu，您可以针对该特定 UL 并因此覆盖其基本 ul 属性
回答by Sergiu
Add float property to your list:
将浮动属性添加到您的列表中：
#menu {
float: right;
}
回答by Alok Kumar
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
如果您使用的是 WordPress 或静态网站，则必须放置此代码才能将导航栏移至右侧。
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
}
You can vary margin-right according to your website design. If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.
您可以根据您的网站设计改变边距。如果您仍然无法在右侧移动导航，请更改位置：如静态、绝对、相对和继承。
