<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* CSS reset */
ul{
list-style: none;
margin: 0;
padding: 0;
}
/* 解决边框多出来的一像素 */
/* 如果有5个框,一共多出来10条边框 (+10)*/
/* 1.每个框自身宽度减一(-5)*/
/* 2.重叠部分,给每个框设置margin-rigth=-1 (-5)*/
/* 样式 */
.brand{
/* 219*5=1095+10=1105-5=1100 */
width: 1100px;
height: 180px;
margin: 0 auto;
background-color: #f00;
}
.brand ul li{
float: left;
width: 219px;
height: 167px;
background-color: #ff0;
border: 1px solid #333;
margin-right: -1px;
}
</style>
</head>
<body>
<div class="brand">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
css中float布局边框案例1
最新推荐文章于 2021-04-24 15:52:56 发布