Html 将我的导航栏对齐/浮动到右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14553995/
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
Aligning/floating my nav bar to the right
提问by Juliana Marguerite Linder
I'm currently attempting to align my nav bar to the right, but it's stubbornly sticking to the left and I don't know what to do. I feel like I've tried everything - text-align, float, etc. I also have HTML5 CSS reset included, if that makes a difference.
我目前正试图将我的导航栏向右对齐，但它顽固地粘在左边，我不知道该怎么办。我觉得我已经尝试了一切 - 文本对齐、浮动等。我还包括 HTML5 CSS 重置，如果这有所不同的话。
Can someone look at my code and let me know if there may be some reason that these nav items won't move to the other side? I'm really frustrated. Thanks.
有人可以看看我的代码，让我知道是否有某种原因这些导航项目不会移动到另一边吗？我真的很沮丧。谢谢。
HTML:
HTML：
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="team.html">Management Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
CSS:
CSS：
body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding- left: 150px;}
li {float: left;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}
NOTE: This is the hacky way that I just fixed it
注意：这是我刚刚修复它的hacky方式
ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}
however, I'm not sure that that is a very good way to do so...
但是，我不确定这是一个很好的方法......
回答by TildalWave
One, admittedly quite stupid solution (but it works), is to float list items to the right and then just reverse their order in HTML. Like this:
一个公认的非常愚蠢的解决方案（但它有效）是将列表项向右浮动，然后在 HTML 中颠倒它们的顺序。像这样：
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="team.html">Management Team</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="index.html">Home</a></li>
</ul>
body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}
回答by 1934286
This is easy
这很简单
change li floatto display:inline;
更改li float为display:inline;
body {
font: normal 300 .8em'Open Sans', sans-serif;
overflow-x:hidden;
}
ul {
text-align: right;
width: 100%;
background-color: #999;
height: 20px;
}
li {
display:inline;
}
ul a {
color: white;
padding: 0 10px;
text-decoration: none;
}
ul a:hover {
color: #333;
}
回答by JakeGould
Change this line in the CSS:
在 CSS 中更改这一行：
ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-left: 150px;}
To this:
对此：
ul {float: right; background-color: #999; height: 20px; padding-left: 150px;}
The problem is your original code was setting the width to 100%. So it was stretching across the screen. text-alignwould not float the inner <li>elements to the right. So the only way to achieve it going right is to get rid of the width: 100%;and set a float: right;
问题是您的原始代码将宽度设置为 100%。所以它在屏幕上伸展。text-align不会将内部<li>元素向右浮动。所以实现它正确的唯一方法是摆脱width: 100%;并设置一个float: right;
If you want a grey box across the page, then wrap the <ul>in a <div>that has the background-color: #999;and the width:100%. Only way to go.
如果你想在整个页面的灰色框，然后包裹<ul>在一个<div>具有background-color: #999;和width:100%。唯一的办法。
Here is the HTML file I created to demonstrate:
这是我创建的用于演示的 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {float: right; background-color: #999; height: 20px; padding-left: 150px;}
li {float: left;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}
</style>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="team.html">Management Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
EDIT:Additional test HTML file to show the <div>wrapper concept. It works for me.
编辑：附加测试 HTML 文件以显示<div>包装器概念。这个对我有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title></title>
<style type="text/css">
body
{
font: normal 300 .8em 'Open Sans', sans-serif;
overflow-x: hidden;
}
div
{
float: left;
width: 100%;
background-color: #999;
}
ul
{
float: right;
background-color: #999;
height: 20px;
padding- left: 150px;
}
li { float: left; }
ul a
{
color: white;
padding: 0 10px;
text-decoration: none;
}
ul a:hover { color: #333; }
</style>
</head>
<body>
<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="team.html">Management Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>
回答by Sophy
I suggest code bellow it make easy to apply style:
我建议下面的代码可以轻松应用样式：
HTML:
HTML：
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="team.html">Management Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
CSS:
CSS：
body {
font: normal 300 .8em 'Open Sans', sans-serif;
overflow-x:hidden;
}
.nav {
overflow: hidden;
background-color: #999;
height: 20px;
}
ul {
overflow: hidden;
float: right;
}
ul li {
float: left;
}
ul li a {color: white;
padding: 0 10px;
text-decoration: none;
}
ul li a:hover {
color: #333;
}
View code snipped http://jsfiddle.net/sophy/eRLtw/
回答by Nathan
ul {float:right;}
Don't give the ul a width and you'll get exactly what you're looking for.
不要给 ul 一个宽度，你会得到你正在寻找的东西。
回答by Daniel Winnard
Don't know if you ever sorted this, but could try this...
不知道你有没有整理过这个，但可以试试这个......
ul {
display:block;
width:100%;
margin:0;
padding:0;
text-align:right;
}
ul li {
display:inline-block;
}
Then style you li's however you need with padding etc.
然后根据需要使用填充等设置样式。
Might do the trick without worrying about floats.
可以做到这一点而不必担心浮动。
Dan
担
