水平菜单UL右对齐和左对齐 [英] Horizontal Menu ul align right and align left

问题描述

我已经通过一切搜查，似乎无法找到这个确切的修复。看来pretty的简单，但我一直在敲打我的头靠在墙上，最近的努力得到它恰到好处。

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.

我有一个网站一个简单的横向菜单。我使用的是UL，使这一切的工作。这是我的code：

I have a simple horizontal menu on a website. I am using an UL to make it all work. Here is my code:

> <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 -->

我的CSS如下：

My Css is as follows:

    #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;
}

我遇到的问题是，在最后一个项目将调整正确的，但现在是最后一个标签和最后一个标签的第二之间的巨大空间。这是因为填充左我在李的部分。我只是想在第一文本左对齐，最后文本右对齐和其他人之间有一致的空间。你可以看到这里的问题：HTTP：//jsfiddle.net/nathan1342/sPZG9/

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/

任何帮助将非常AP preciated !!

Any help would be very much appreciated!!

谢谢！

推荐答案

你不应该在这里有不同的浮点值的工作。 改用浮动：左为所有Li和定位的第一和最后一个元素绝对的。 包装盒#nav应该定位相对

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.

<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 -->

这篇关于水平菜单UL右对齐和左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！