Html 水平菜单ul向右对齐和向左对齐

我找遍了所有东西，似乎找不到确切的解决办法。这看起来很简单，但我最近一直在拼命想把它做好

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

我遇到的问题是，最后一个项目将正确对齐，但现在在倒数第二个选项卡和最后一个选项卡之间有一个巨大的空间。这是因为我在li a部分中留下了填充物。我只希望第一个文本向左对齐，最后一个文本向右对齐，中间的其他文本具有一致的空间。你可以在这里看到问题：http://jsfiddle.net/nathan1342/sPZG9/

任何帮助都将不胜感激

---

谢谢

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

#导航{
位置：相对位置；
宽度：980px；
保证金：0；
填充：0；
高度：100px；
边框：1px纯红；
}
#导航ul{
显示：块；
保证金：0px自动；
宽度：600px；
}
#nav ul li{列表样式：无}
#nav ul LIA{显示：块；浮动：左；填充：5px 62px 0 0px；文本装饰：无；颜色：#000；}
.左{
位置：绝对位置；
顶部：0px；
左：10px；
文本对齐：左对齐；
}
.对{
位置：绝对位置；
顶部：0px；
右：10px；
}
.right a{右填充：0！重要；}

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

#导航{
位置：相对位置；
宽度：980px；
保证金：0；
填充：0；
高度：100px；
边框：1px纯红；
}
#导航ul{
显示：块；
保证金：0px自动；
宽度：600px；
}
#nav ul li{列表样式：无}
#nav ul LIA{显示：块；浮动：左；填充：5px 62px 0 0px；文本装饰：无；颜色：#000；}
.左{
位置：绝对位置；
顶部：0px；
左：10px；
文本对齐：左对齐；
}
.对{
位置：绝对位置；
顶部：0px；
右：10px；
}
.right a{右填充：0！重要；}

嗯，这并不理想，但您可以将其用作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%的空间。

好吧，这并不理想，但您可以使用它作为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%的空间。

您在这里的代码和您在JSFIDLE链接中提供的代码有差异，例如您没有在这里发布#nav标记。调整您的宽度导航ul栏的宽度，对我来说没有问题，将Contact us链接延伸到远端，其他所有内容都等距排列，这样可以很好地渲染。

此处的代码与您在JSFIDLE链接中提供的代码有差异，例如，您没有在此处张贴#nav标记。调整您的宽度导航ul栏的宽度，对我来说没有问题，将Contact us链接延伸到远端，并将其他所有内容等距放置，即可呈现良好效果。

尝试以下操作：

我使用了display:inline block，更改了填充，设置了一个宽度，使菜单以均匀间隔的项目填充指定的宽度。

尝试以下操作：

---

我使用了display:inline block，更改了填充，设置了一个宽度，使菜单以均匀间隔的项目填充指定的宽度。

这非常接近于修复它。我对你的代码做了一点修改就明白了。非常感谢！！：

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

---

这是非常接近修复它。我对你的代码做了一点修改就明白了。非常感谢！！：

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

---

检查这个答案：这个检查这个答案：这个非常接近于修复它。我对你的代码做了一点修改就明白了：#nav{position:relative；width:980px；margin:0 auto；padding:0；height:40px；}#nav ul{display:block；margin:0 0-40px；width:980px；font size:20px；}#nav ul li{list style:none}}#nav ul li a{显示：块；浮动：左；填充：5px 68px 0 0px；文本装饰：无；颜色：#fff；}。左{位置：绝对；顶部：0px；左：10px；文本对齐：左；填充：0；}。右{位置：绝对；顶部：0px；右：10px；}。右a{填充右侧：0！重要；}这非常接近于修复它。我对代码做了一点修改后得到了它：#nav{position:relative；width:980px；margin:0 auto；padding:0；height:40px；}#nav ul{display:block；margin:0-40px；width:980px；font size:20px；}#nav ul li{列表样式：none}#nav ul li a{显示：块；浮动：左；填充：5px 68px 0 0px；文本装饰：无；颜色：#fff；}。左{位置：绝对；顶部：0px；左：10px；文本对齐：左；填充：0；}。右{位置：绝对；顶部：0px；右：10px；}。右a{填充右侧：0！重要；}