Xuanmo Blog

    :after伪类，在元素内容之后添加内容

    实现原理：导航的子元素使用inline-block行间块级元素，父元素设置text-align:justify;在为此父元素添加after伪类，并设置为inline-block，给出宽度width:100%;这一步是用after撑开父元素，从而达到两端对齐的导航。

html代码：

<ul id="box">
    <li><a href="javascript:;">主页</a></li>
    <li><a href="javascript:;">JavaScript</a></li>
    <li><a href="javascript:;">HTML5</a></li>
    <li><a href="javascript:;">canvas</a></li>
    <li><a href="javascript:;">svg</a></li>
    <li><a href="javascript:;">轩陌的博客</a></li>
</ul>

css代码：

*{margin: 0;padding: 0}
#box{width: 80%;height: 50px;margin: 50px auto;/*border: 1px solid #ffa8e2;*/border-radius: 5px;text-align: justify;}
#box li{list-style: none;display: inline-block;height: 50px;padding: 0 10px;background: #65daf6;border-radius: 5px;}
#box li a{text-decoration: none;font: 14px/50px "microsoft yahei";color: #fff;} 
#box:after{content: "";display: inline-block;width: 100%;}

DEMO展示