Html 水平菜单 ul 右对齐和左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9186259/
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 ul align right and align left
提问by Nathan
I've searched through everything and can't seem to find an exact fix for this. It seems pretty simple but I've been beating my head against a wall lately trying to get it just right.
我已经搜索了所有内容，似乎无法找到确切的解决方法。这看起来很简单，但我最近一直在用头撞墙，试图让它恰到好处。
I have a simple horizontal menu on a website. I am using an UL to make it all work. Here is my code:
我在网站上有一个简单的水平菜单。我正在使用 UL 使其一切正常。这是我的代码：
> <div id="nav">
> <ul>
> <li><a href="#">Home</a></li>
> <li><a href="#">company</a></li>
> <li><a href="#">Products</a></li>
> <li><a href="#">Services</a></li>
> <li><a href="#">Involvement</a></li>
> <li><a href="#">Blog</a></li>
> <li class="right"><a href="#">Contact Us</a></li>
> </ul>
> </div> <!-- End Nav -->
My Css is as follows:
我的CSS如下：
#nav ul{
width:980px;
margin:0;
padding:0;
border:1px solid red;
}
#nav ul li{ float:left;color:#FFF}
#nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF}
#nav ul li.right{float:right;margin-right: -30px;
}
The Problem I am having is that the last item will align right but now there is a huge space between the second to last tab and the last tab. This is because of the padding left I have in the li a portion. I just want the first text to align left and the last text to align right and the others in between to have consistent space. You can see the issue here:http://jsfiddle.net/nathan1342/sPZG9/
我遇到的问题是最后一个项目会正确对齐，但现在倒数第二个选项卡和最后一个选项卡之间有很大的空间。这是因为我在 li 部分留下了填充。我只希望第一个文本左对齐，最后一个文本右对齐，中间的其他文本具有一致的空间。你可以在这里看到这个问题：http://jsfiddle.net/nathan1342/sPZG9/
Any help would be very much appreciated!!
任何帮助将不胜感激！
Thanks!
谢谢！
回答by thisisablock
you should not work here with different float values. use instead float: left for all li and position the first and last element absolute. the wrapper box #nav should be positioned relative.
你不应该在这里使用不同的浮点值。改为使用 float: left 为所有 li 并绝对定位第一个和最后一个元素。包装盒#nav 应该相对定位。
<style>
#nav{
position: relative;
width:980px;
margin:0;
padding:0;
height: 100px;
border:1px solid red;
}
#nav ul{
display: block;
margin: 0px auto;
width: 600px;
}
#nav ul li {list-style: none}
#nav ul li a{display:block; float: left; padding:5px 62px 0 0px; text-decoration:none; color:#000;}
.left{
position: absolute;
top: 0px;
left: 10px;
text-align: left;
}
.right{
position: absolute;
top: 0px;
right: 10px;
}
.right a { padding-right: 0 !important;}
</style>
<div id="nav">
<ul>
<li class="left"><a href="#">Home</a></li>
<li><a href="#">company</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Involvement</a></li>
<li><a href="#">Blog</a></li>
<li class="right"><a href="#">Contact Us</a></li>
</ul>
</div> <!-- End Nav -->
回答by The Real Baumann
well, it's not ideal, but you could get the approximate result by using this as your css...
好吧，这并不理想，但是您可以通过将其用作 css 来获得近似结果...
#nav ul{
width:980px;
margin:0;
padding:0;
border:1px solid red;
}
#nav ul li{ float:left;color:#fff;width:16%;}
#nav ul li a {display:block;text-decoration:none; color:#FFF;}
}
That's just playing off of the fact that since we know you have 6 items in the list, each item should take up approximately 16% of the space.
这只是因为我们知道列表中有 6 个项目，每个项目应该占据大约 16% 的空间。
回答by Parijat Kalia
Your code here and the code you have provided in your jsfiddle link have differences, for instance you haven't posted #nav tag here. Adjust the width of your width nav ul bar, there is no problem for me, it renders fine with the Contact us link stretched to the far end and everything else equally spaced out.
您在此处的代码与您在 jsfiddle 链接中提供的代码存在差异，例如您尚未在此处发布 #nav 标签。调整您的宽度导航栏的宽度，对我来说没有问题，它可以很好地将“联系我们”链接拉伸到远端并且其他所有内容均等地间隔开。
回答by Caleb Doucet
try this:
尝试这个：
I used display: inline-block, changed the padding, set a width to make the menu fill the width you specified with evenly spaced items.
我使用了 display: inline-block，改变了内边距，设置了一个宽度，使菜单填充你指定的宽度均匀的项目。
回答by Nathan
That was very close to fixing it. I got it though with a little alteration to your code. Thanks a ton!!:
那非常接近修复它。我得到了它，但对您的代码稍作改动。万分感谢！！：
#nav{
position: relative;
width:980px;
margin:0 auto;
padding:0;
height: 40px;
}
#nav ul{
display: block;
margin: 0 0 0 -40px;
width: 980px;
font-size:20px;
}
#nav ul li {list-style: none}
#nav ul li a{display:block; float: left; padding:5px 68px 0 0px; text-decoration:none; color:#fff;}
.right{
position: absolute;
top: 0px;
right: 10px;
}
.right a { padding-right: 0 !important;}
