利用after伪类做一个自适应居中导航
分类: 实战案例 4328 1
: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%;}
共 1 条评论关于 “利用after伪类做一个自适应居中导航”