Question

我搜索了所有内容，似乎无法找到一个确切的解决方案。这看起来很简单，但我最近一直在试图让它恰到好处地撞墙。

我在网站上有一个简单的水平菜单。我正在使用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 -->

我的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;
}

我遇到的问题是最后一项会对齐，但现在第二个到最后一个标签和最后一个标签之间有一个很大的空间。这是因为我在li部分留下了填充物。我只是希望第一个文本左对齐，最后一个文本对齐，其他文本对齐，以保持一致的空间。你可以在这里看到问题：http：//jsfiddle.net/nathan1342/sPZG9/

非常感谢任何帮助!!

谢谢！

Answer 1

你不应该在这里使用不同的浮点值。使用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 -->

Answer 2

嗯，这不太理想，但你可以用这个作为你的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;}
}

这就是事实，因为我们知道你在列表中有6个项目，每个项目应该占用大约16％的空间。

Answer 3

此处的代码以及您在jsfiddle链接中提供的代码存在差异，例如您尚未在此处发布#nav标记。调整宽度导航ul条的宽度，对我来说没有问题，它可以很好地将Contact us链接拉伸到远端，其他所有内容均匀分开。

Answer 4

试试这个：

http://jsfiddle.net/Szv5x/

我使用了display：inline-block，更改了填充，设置了一个宽度，使菜单用指定的间隔项填充你指定的宽度。

Answer 5

这非常接近修复它。我得到了它，但对代码进行了一些修改。非常感谢!!：

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

水平菜单ul右对齐并左对齐

5 个答案: