导航相关（下方导航指示条居中）

实现效果：

为了让下方的横条居中显示，而且后期添加/减少时，也能动态居中，因此考虑将 ul 中的内容设置为block，这样才能对 ul 进行 text-align: center; 的设置，因此这里的 li 不能用 float ：left ；必须设置成 display ：inline-block； 

 

html代码：

<div class="demo">
    <ul>
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

 

CSS代码：

div,ul,li {padding: 0; margin: 0; }
       .demo{
           height: 500px;
           width: 500px;
           position: absolute;
           top: 100px;
           left: 30%;
           background: #f67a03;
       }
        .demo ul{
            position: absolute;
            width: 100%;
            bottom: 20px;
            font-size: 0;
            text-align: center;
        }
        .demo ul li{
            display: inline-block;
            width: 40px;
            height: 10px;
            margin: 0 10px;
            background: #ffffff;
            list-style-type: none
        }
        .demo ul li.on{
            background: #3f240e;
        }