* { margin:0; padding:0; } #box { margin:0 auto; height:300px; width:500px; overflow:hidden; position:relative; } .advs { width:2500px; list-style:none; float:left; position:absolute; transition:left 1s; } .advs li { float:left; } .icons { width:300px; position:absolute; left:calc(50% - 150px); bottom:8px; text-align:center; } .icons > li { border-radius:50%; display:inline-block; /*即可以设置宽高,又变成了行级标签,而且标签之间的换行会转换成空格*/ width:20px; height:20px; background:rgba(150,150,152,0.5); margin:0 5px; } .icons > li.curr { background:#99cc99; }