display的table和cell外加table-layout:fixed等分布局，外加换行，word-wrap:break-word 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{margin:0;padding:0}
 8         ul{display:table;table-layout: fixed;width:100%;
 9             height: 200px;padding:20px;-webkit-box-sizing: border-box }
10         li{display:table-cell;background:#f45;word-wrap:break-word;padding:20px}
11         div{background:#f0f;height:100%;width:100%}
12     </style>
13 </head>
14 <body>
15 <ul>
16     <li>11111111111111111111111111111111111</li>
17     <li><div>2</div></li>
18     <li><div>2</div></li>
19     <li><div>2</div></li>
20     <li><div>2</div></li>
21     <li><div>2</div></li>
22 </ul>
23 <script>
24 
25 </script>
26 <!--父元素可以使用margin和padding，子元素不能用margin;但是可以用padding-->
27 </body>
28 </html>

 

posted @ 2015-11-11 13:17  挥刀  阅读(421)  评论(0)  编辑  收藏  举报