【CSS浮动布局】列表实例

最新推荐文章于 2025-05-26 20:21:04 发布

我是叫哦哦

最新推荐文章于 2025-05-26 20:21:04 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： css 列表

本文链接：https://blog.youkuaiyun.com/weixin_44115149/article/details/105412010

本文深入讲解了CSS中的浮动布局概念，包括浮动的基本定义及其在网页布局中的应用。通过实例演示了如何使用浮动使元素在同一行显示，适用于前端开发人员学习和参考。

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

01

什么是浮动？
（float）浮动是CSS实现布局的一种方式，包括div在内的任何元素都能以浮动的方式显示。

值	说明
none	不浮动
left	向左浮动
right	向右浮动

02

一个例子

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动布局列表</title>
   <style>
   *{
   margin:0;
   padding:0;
   }
   ul{
   list-style:none;//去掉li前面的小黑点
   margin:100px auto;
   width:500px;//宽
   height:150px;//高
   border:10px solid blue;//边框
   }
   li{
   float:left;//都向左浮动
   }
   </style>
</head>
<body>
<ul>
<li><img src="pic1.jpg" /></li>
<li><img src="pic2.jpg" /></li>
<li><img src="pic3.jpg" /></li>
<li><img src="pic4.jpg" /></li>
</ul>
</body>
</html>