Question

float和inline-block的使用 使用float会出现排版问题

各位大虾帮忙！

<footer>
<div>
每页显示 <select name="" id=""><option value="">20</option><option value="">40</option></select>行
</div>
<div>
<dl>
<dt><</dt>
<dt>1</dt>
<dt>2</dt>
<dt class="currentPage">3</dt>
<dt>4</dt>
<dt class="noborder">……</dt>
<dt>86</dt>
<dt>></dt>
</dl>
</div>
<div>
共<span >100</span>页,到第 <input type="text" />页 <input type="button" value="确定" class="okBtn"/>
</div>
</footer>

相关的一些css:
footer{
height: 45px;
}
footer div{
display: inline-block;
height: 45px;
line-height: 45px;
}
footer dl{
margin: 0px 0px 0px 223px ;
}
footer dl dt{
float:left;
width:20px;
height:20px;
border:1px solid #D6D6D6;
text-align: center;
padding-right:5px;
line-height: 20px;
margin-right:5px;
}
运行结果：

会发现dl比其他两个div要高出一块

如果改成
footer dl{
margin: 0px 0px 0px 223px ;
display: inline-block;
}
footer dt{
float:left;
width:20px;
height:20px;
border:1px solid #D6D6D6;
text-align: center;
padding-right:5px;
line-height: 20px;
margin-right:5px;
}
运行结果：

只要把dl改成inline-block，三个div就水平对齐了

这是为什么？？是不是float的问题？？





Answer 1

是因为dl里面的dt全部浮动。导致dl高度塌陷。。
给dl加overflow:hidden;也行。

追问

亲证可行，非常感谢！！
这里dl加overflow:hidden为什么可以呢？？

追答

可以参考一下这篇文章，我说的可能更不清楚。。

http://www.chinaz.com/design/2008/0818/35473.shtml