<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ list-style:none; margin:0; padding:0; font-size:12px;} div div{ width:100%; height:24px; overflow:hidden; border-bottom:1px solid #f00; background:#ff0; line-height:24px;} a{ float:left; width:30%;} li{ width:100%; height:24px; overflow:hidden; border-bottom:1px solid #f00; background:#fc0; line-height:24px;} /*ie6ie7的bug，解决：让li也浮动 ul{ 100%; overflow:hidden;} li{ float:left; 100%; height:24px; border-bottom:1px solid #f00; background:#fc0; line-height:24px;}*/ </style> </head> <body> <div> <div><a href="#">111</a><a href="#">111</a></div> <div><a href="#">111</a><a href="#">111</a></div> <div><a href="#">111</a><a href="#">111</a></div> <div><a href="#">111</a><a href="#">111</a></div> <div><a href="#">111</a><a href="#">111</a></div> <div><a href="#">111</a><a href="#">111</a></div> </div> <ul> <li><a href="#">111</a><a href="#">111</a></li> <li><a href="#">111</a><a href="#">111</a></li> <li><a href="#">111</a><a href="#">111</a></li> <li><a href="#">111</a><a href="#">111</a></li> <li><a href="#">111</a><a href="#">111</a></li> <li><a href="#">111</a><a href="#">111</a></li> </ul> </body> </html>
方法2：给li子元素添加vertical-align除baseline的任意值。不打算用这种方法