今天调网页、突然注意到了这个:
先来看看两个效果:
没对齐:
不到1年 1年到3年
不到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