前军教程网

我们在做网站导航的时候经常会遇到这样的问题：每个导航栏目名字字数不一样，然后栏目少的时候，整体偏向左边了，右边空白一大片；这时候虽然可以通过调节间距，进行改变，但也有一个弊端，例如下次在增加一个栏目，又得重新调整间距。

于是乎小编就在想：有没有一种方法能够让导航自适应两端对齐，重新增加栏目，自动改变相应的间距。经过反复测试，还真有这样的办法。

这个办法需要用到text-align:justify;和display：inline-block;以及after伪类。

话不多说，直接上码：

<ul id="nav">

<li><a href="">阿里巴巴</a></li>

<li><a href="">百度</a></li>

<li><a href="">亚马逊</a></li>

<li><a href="">礼物</a></li>

</ul>

css代码如下：

*{padding:0px; margin:0px;}

ul,li{list-style:none;}

a{text-decoration:none; color:deeppink;}

#nav{width:600px; height:40px; text-align:justify; background:#fff; border:1px solid red;

margin:100px auto 0 auto;}

#nav li a{display:block; background:deepskyblue;

text-align:center; border-radius: 10px; padding:11px;}

/*两端对齐导航*/

#nav li{display:inline-block;}

#nav:after{content:""; display:inline-block; width:100%;}

上效果图：

去掉一个栏目后：

增加一个栏目：

怎么样，还不错吧，至于这是什么原理，就留给各位去思考了。