将导航栏对齐/浮动到右侧
[英]Aligning/floating my nav bar to the right
问题描述
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... 但是，我不确定这是一个非常好的方法...
6 个解决方案
解决方案1
6 2013-01-28 00:59:36
One, admittedly quite stupid solution (but it works), is to float list items to the right and then just reverse their order in HTML. 一个，诚然相当愚蠢的解决方案（但它的工作原理）是将列表项浮动到右边，然后在HTML中反转它们的顺序。 Like this: 像这样：
<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;}
解决方案2
3 2013-01-28 03:00:51
This is easy 这很容易
http://jsfiddle.net/qZ7Tr/10/ http://jsfiddle.net/qZ7Tr/10/
change li float to display:inline; 改变li float to 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;
}
解决方案3
0 2013-01-28 01:05:58
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%. 问题是您的原始代码将宽度设置为100％。 So it was stretching across the screen. 所以它在屏幕上伸展。 text-align would not float the inner <li> elements to the right. text-align不会将内部<li>元素浮动到右侧。 So the only way to achieve it going right is to get rid of the width: 100%; 因此，实现正确的唯一方法是摆脱width: 100%; and set a float: right; 并设置一个float: right;
If you want a grey box across the page, then wrap the <ul> in a <div> that has the background-color: #999; 如果你想在页面上有一个灰色框，那么将<ul>包装在具有background-color: #999;的<div>中background-color: #999; and the width:100% . width:100% 。 Only way to go. 唯一的出路。
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. 编辑：附加测试HTML文件，以显示<div>包装器概念。 It works for me. 这个对我有用。
<!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>
解决方案4
0 2013-01-28 02:39:46
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/ 查看代码剪断http://jsfiddle.net/sophy/eRLtw/
解决方案5
0 2016-03-09 20:58:36
ul {float:right;}
不要给ul一个宽度，你会得到你正在寻找的东西。
解决方案6
0 2018-09-19 13:22:02
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 担
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.