DIV CSS 佈局教程網

網頁制作Poluoluo文章簡介：IE下li元素產生間距的BUG

<style> li{ background-color: green; height: 20px; } li a { float: left; } li span { float: right; } </style> <ul> <li><a href="">aaa</a><span>bbb</span></li> <li><a href="">aaa</a><span>bbb</span></li> </ul>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

解決方法：li設置css vertical-align: bottom;

<style> li{ background-color: green; height: 20px; vertical-align: bottom; } li a { float: left; } li span { float: right; } </style> <ul> <li><a href="">aaa</a><span>bbb</span></li> <li><a href="">aaa</a><span>bbb</span></li> </ul>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

上邊的方法一般都會解決問題，但是許多時候許多未知的原因，還會導致間距問題的出現。試試以下方法：
1.定義行高 line-height
2.設置隱藏 overflow:hidden
3.li增加浮動屬性 float