html中让 ul 的多个 li 在一行内显示

最新推荐文章于 2024-09-22 09:41:41 发布

asxxf

最新推荐文章于 2024-09-22 09:41:41 发布

阅读量4.9w

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/asxxf/article/details/53303987

版权

有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~

 
         <!DOCTYPE html PUBLIC  
         "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
         > 
        
         <html xmlns= 
         "http://www.w3.org/1999/xhtml" 
         xml:lang= 
         "en" 
         > 
        
         <head> 
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html;charset=UTF-8" 
         > 
        
         <title>Document</title> 
        
         <style type= 
         "text/css" 
         > 
        
         *{ 
        
         padding 
         :  
         0 
         ; 
        
         margin-bottom 
         : 
         0 
         ; 
        
         border 
         :  
         0 
         ; 
        
         } 
        
         .box{ 
        
         width 
         :  
         640px 
         ; 
        
         height 
         :  
         50px 
         ; 
        
         overflow-x:  
         scroll 
         ; 
        
         overflow-y:  
         hidden 
         ; 
        
         } 
        
         ul{ 
        
         display 
         : 
         inline 
         ; 
        
         white-space 
         :  
         nowrap 
         ; 
        
         } 
        
         ul li{ 
        
         padding 
         :  
         10px 
         20px 
         ; 
        
         display 
         : inline- 
         block 
         ; 
        
         background 
         :pink; 
        
         white-space 
         : 
         nowrap 
         ; 
        
         } 
        
         </style> 
        
         </head> 
        
         <body> 
        
         <div class= 
         "box" 
         > 
        
         <ul> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         <li>所有li都在一行显示</li> 
        
         </ul> 
        
         </div> 
        
         </body> 
        
         </html>