umasuo—用span对checkbox或radiobutton进行列对齐

今天调网页、突然注意到了这个：

先来看看两个效果：

没对齐：
不到1年 1年到3年

3年到5年 5年到7年

7年到10年 10年以上

 按照列对齐：

不到1年 1年到3年

3年到5年 5年到7年

7年到10年 10年以上

 

这种对齐可以通过设置第一列的span的宽度来达到对齐的效果，但是因为span属于内联元素，而内联元素是忽略宽度和高度的，所以如果直接设置其宽和高地话是行不通的。解决办法就是利用css将span变为块元素。

 

将内联元素定义为块元素的方法有两种：

1、.直接使用显示属性display将其定义为块元素：

　　 display:block;

2、.使用浮动属性float将其自动定义为块元素：

　　float:left

上面的效果是使用float达到的。

二者的区别：

　　第一种方法写出的span是清除两侧浮动的，也就是如果后面跟了任何元素都会折回到下一行显示；而第二种利用浮动的定义方法，如果span后面跟随了元素则会和它在同一行显示，此处要绝对注意。

 

有关html元素分类的文章，这里有一篇：http://www.cnblogs.com/umasuo/articles/html_element.html

转载于:https://www.cnblogs.com/umasuo/archive/2012/04/27/span_block.html