当前位置：首页 → 问答吧 → 关于 li 的高度统一问题

关于 li 的高度统一问题

时间：2011-03-16

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .main { width: 520px; border: 1px solid #CCC; overflow: hidden; padding-top: 15px; padding-bottom: 15px; } .main ul li { list-style-type: none; float: left; margin-right: 10px; margin-left: 10px; padding: 0px; margin-top: 0px; margin-bottom: 0px; } .main ul { margin: 0px; padding: 0px; } .a { background-color: #EFEFEF; height: 100px; width: 100px; border: 1px solid #CCC; } .b { background-color: #06F; height: 80px; width: 100px; border: 1px solid #CCC; } </style> </head> <body> <div class="main"> <ul> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="b"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="b"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="b"></div></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

以上代码中由于div的高度不一样导致 Li 的高度不统一怎样才能做到所有 Li 正确排列？有一个办法就是定义LI的高度但是有没有更好的解决方法呢

以下是应该正确显示的样子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .main { width: 520px; border: 1px solid #CCC; overflow: hidden; padding-top: 15px; padding-bottom: 15px; } .main ul li { list-style-type: none; float: left; margin-right: 10px; margin-left: 10px; padding: 0px; margin-top: 0px; margin-bottom: 0px; } .main ul { margin: 0px; padding: 0px; } .a { background-color: #EFEFEF; height: 100px; width: 100px; border: 1px solid #CCC; } .b { background-color: #06F; height: 100px; width: 100px; border: 1px solid #CCC; } </style> </head> <body> <div class="main"> <ul> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="b"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="b"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="a"></div></li> <li><div class="b"></div></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 pdsxb 于 2011-3-16 16:46 编辑 ]

作者: pdsxb 发布时间: 2011-03-16

转了一圈，发现楼主竟然没有声明字体font!

作者: xmlovedoudou 发布时间: 2011-03-16