利用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%;}

DEMO展示

  • 8人 Love
  • 2人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
demo

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 1 条评论关于 “利用after伪类做一个自适应居中导航”

Loading...