今天要写一个图片幻灯,图片下方居中位置有几个圆点来作为切换图的TAB。
圆点数量是要随图片张数变的,所以不能用固定宽度margin auto来做,圆点是CSS写的,所以不能转成行级用text-align。
请问该如何做?不用JS
圆点数量是要随图片张数变的,所以不能用固定宽度margin auto来做,圆点是CSS写的,所以不能转成行级用text-align。
请问该如何做?不用JS
1
lichao Aug 20, 2013 原点外面包个 div,然后在这个 div 上写 CSS:text-align: center;
|
2
kfll Aug 20, 2013 <!Doctype html>
<meta charset="UTF-8"> <style> p { text-align: center; } i { background-color: #f90; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 9px 9px rgba(255, 255, 255, .2); } </style> <p> <i> </i> <i> </i> </p> |
3
kfll Aug 20, 2013
|
4
chairuosen OP @kfll 原来如此,之前一直用固定高宽,一变inline就瘪了。。。原来可以用空格+padding撑开行级元素。。就是有点不好算高宽
|
5
veraucio Aug 20, 2013 display: inline-block;
|