想要实现的效果:
但是在给li标签设置float:left;时,出现下面这种情况:
我的代码:
ul li {
float: left;
width: 100px;
text-align: center;
font-size: 12px;
}
原因是:没有定高,高度坍塌。可以选择定高。但是我写的这个场景,因为每个li的内容都不是一样多,所以无法定高。
在折中情况下,解决方法有两个:
1. 清除第二行第一个的浮动。
<li style="clear: both;">
2. 取消浮动,将li设置为行级块元素。
ul li {
display: inline-block;
width: 100px;
text-align: center;
font-size: 12px;
}