【CSS浮动布局】列表实例

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>

结果如图:
【CSS浮动布局】列表实例_第1张图片

03

方法:
ul和li默认情况下是块元素,要想让他们在一行中显示,就要用到浮动。

如果想让多个块在同一行显示,则将这些块设置为浮动,并且浮动方向相同。

你可能感兴趣的:(【CSS浮动布局】列表实例)