常用li列表布局
希望成效
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jsTree test</title> <!-- 2 load the theme CSS file --> <script type="text/javascript" src = "jquery.js"></script> <link rel="stylesheet" type="text/css" href="li.css"> </head> <body> <div class="wrap"> <p>你好你好你好</p> <ul class="list clearfix"> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> <li><a class="text-overflow">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈</a></li> </ul> </div> </body> </html>
css
*{ margin: 0; padding: 0; } .text-overflow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .clearfix:after { content:""; display:block; visibility:hidden; height:0px; line-height:0px; clear:both; zoom:1; } .wrap { background: yellow; width: 700px; /*overflow: hidden;*/ /*解决方案1 bfc 失败 不知为何*/ padding: 20px 0; /*@解决方案2 成功解决ul下边距问题*/ }
/*.wrap>p {
padding: 20px 30px 0; /*p的边距*/ /*@问题1时的css*/
}*/
.wrap>p { margin-left: 30px; /*p的左边距*/ margin-bottom: 20px; /* 根据@解决方案2 调整 p的下边距*/ } .wrap .list { list-style-type: none; /*去掉li的点*/ /*padding: 20px 0;*/ /*ul的上下边距*/ /* @问题1. 但在ie7下会奇葩的变成li之间的边距*/ /*margin: 20px 0; */ /*@ 解决方案1 一般爱用padding是怕margin碰到外边距折叠的问题。但是这里不得不用了。所以要让父元素wrap形成bfc,可是失败了*/ } .wrap .list>li { float: left; background: url(img/disc.png) no-repeat center left; /*使图片在li的左中部*/ padding: 3px 0; /*li的上下边距*/ margin-left: 20px; /*li的左右边距*/ } .wrap .list a { float: left; /*text-over需要宽度。行内元素用float才能实现变块级元素*/ width: 300px; /*截断的宽度*/ padding-left: 20px; /*左边空出图片的距离*/ }
在问题1的css标签下，ie7会出现如下诡异的东西。ul的padding变成li的padding了。
检查顺序：字够宽，行数够多，chrome，firefox，ie789
