1、运用css3的nth-child(3n):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
*{margin:0;padding:0}
.box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
.box ul{overflow:hidden;}
.box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-right:10px;margin-bottom:10px;}
.box ul li:nth-child(3n){margin-right:0;}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
</body>
</html>
2、运用margin负值(该方法可以兼容老版浏览器):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
*{margin:0;padding:0}
.box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
.box ul{overflow:hidden;margin-left:-10px;}
.box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-left:10px;margin-bottom:10px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
</body>
</html>
时间： 2024-08-27 03:38:45