实现效果：

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

 

html代码：

 

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;        }