希望成效
html
jsTree test 你好你好你好
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈
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