div中li不换行的解决方案

 

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>无标题文档</title>
 6     <style type="text/css">
 7         div
 8         {
 9             width: 200px;
10             overflow:scroll;
11             white-space: nowrap;
12             border: #333 1px solid;
13         }
14 
15             div ul li
16             {
17                 display: inline-block;
18                 display: -moz-inline-stack;
19                 *display: inline;
20             }
21     </style>
22 </head>
23 <body>
24     <div class="layout">
25         <ul>
26             <li>横向滚动横线滚动</li>
27             <li>横向滚动横线滚动</li>
28             <li>横向滚动横线滚动</li>
29             <li>横向滚动横线滚动</li>
30             <li>横向滚动横线滚动</li>
31             <li>横向滚动横线滚动</li>
32             <li>横向滚动横线滚动</li>
33             <li>横向滚动横线滚动</li>
34             <li>横向滚动横线滚动</li>
35             <li>横向滚动横线滚动</li>
36             <li>横向滚动横线滚动</li>
37             <li>横向滚动横线滚动</li>
38         </ul>
39     </div>
40 </body>
41 </html>

 

posted @ 2013-09-12 17:31  闭眼看世界  阅读(1158)  评论(0)    收藏  举报