居中的导航栏和链接 [英] Centered navigation bar and links

问题描述

我一直在寻找一种方法来使导航栏与页面一样宽，并且具有均匀分布的链接。我看过这两个地方：

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizo​​ntal_float_advanced
http://www.cssnewbie.com/full-width-centered-navigation-bar/

他们的帮助，但不解释均匀分布的链接。它们或者全部浮动到左边或者右边。

解决方案

如果我理解你的问题，你必须使用百分比。 p>

这里有一个快速示例：

  ul {width：100％; display：inline-block; background：green;} ul li {float：left;宽度：25％; text-align：center;}  

 < ul& < li>< a href => LINK 1< / a>< / li> < li>< a href => LINK 2< / a>< / li> < li>< a href => LINK 3< / a>< / li> < li>< a href => LINK 4< / a>< / li>< / ul>   
 
 
 
您需要将每个 LI 宽度设置为25％，其中5个项目的宽度将是20％等等... 
 
I've been looking for a way to make a navigtion bar as wide as the page, and with links that are spead out evenly. I've looked as these two places:

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
http://www.cssnewbie.com/full-width-centered-navigation-bar/

They kind of help but do not explain evenly spread out links. They either all float to the left or the right. Any assistance with this would be very appreciated.
解决方案
You have to work with percentage if I've understand your question.

Here a fast example: 



ul {
  width: 100%;
  display: inline-block;
  background: green;
}

ul li {
  float: left;
  width: 25%;
  text-align: center;
}

<ul>
  <li><a href="">LINK 1</a></li>
  <li><a href="">LINK 2</a></li>
  <li><a href="">LINK 3</a></li>
  <li><a href="">LINK 4</a></li>
</ul>





with 4 items in list you need to set each LI width to 25%, with 5 items the width will be 20% and so on...

                        
这篇关于居中的导航栏和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！