CSS自动换行,强迫不换行

最新推荐文章于 2026-06-21 09:38:10 发布

转载最新推荐文章于 2026-06-21 09:38:10 发布 · 1.5k 阅读

收录于

CSS

本文介绍了几种使用CSS实现特定布局的方法，包括自动换行、强制不换行及带有浮动效果的不换行布局，并通过具体的HTML代码示例展示了如何设置样式以达到预期的效果。

自动换行

 
  div{  
 word-wrap: break-word;  
 word-break: normal;  
 }

强迫不换行

 
  div{  
 white-space:nowrap;  
 }

带有浮动效果的　不换行

   
  
<div id="pic">
                 <ul>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/imgget1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                     <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                  </ul>
             </div>
   
  

 
  #pic 
  {float:left; width:920px; margin:0 10px;}
  
 #pic ul 
  {margin:15px 0; white-space:nowrap; width:920px; overflow:hidden;}
  
 #pic li 
  {*float:left; width:90px; margin:0 5px; *clear:right; border:1px solid #B7DEEF; text-align:center; display:inline-block}
  
 #pic li img 
  {max-width:90px; max-height:90px; vertical-align:middle;}