css项目列表如何水平放置

最新推荐文章于 2024-10-11 15:13:15 发布

weixin_34187862

最新推荐文章于 2024-10-11 15:13:15 发布

阅读量500

点赞数

本文介绍如何使用CSS的浮动属性让列表项水平排列，并提供了一个具体的实现案例，包括HTML结构和CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表项目默认分行排列，那么将列表项设置浮动就可以实现水平放置

1	`li{` `float` `:` `left` `;}`

示例如下：

创建Html元素

         <
         ul
         >
        

             
         <
         li
         >itemlist-1</
         li
         >
        

             
         <
         li
         >itemlist-2</
         li
         >
        

             
         <
         li
         >itemlist-3</
         li
         >
        

             
         <
         li
         >itemlist-4</
         li
         >
        

         </
         ul
         >
        

设置css样式

1 2	`ul{` `width` `:` `500px` `;` `height` `:` `50px` `;` `line-height` `:` `50px` `;` `padding` `:` `10px` `25px` `;` `border` `:` `4px` `solid` `#ebcbbe` `;}` `li{` `padding` `:` `0` `20px` `;` `float:left` `;}`