左右浮动边距为0,中间间隔一定

很常见的一种布局:
有容器A,里边排1~6,六个小层,每行3个
实现:两侧的小层和容器的左右边缘对齐,中间间隔10像素,而这六个小层是循环的,都用同一个样式

解决这个问题的关键因素是:
1>
 .list 的宽度设置成需要的宽度,这里为320px,因为下面3个li的宽度和 中间间距一起是320px,可以加上overflow:hidden;不过不加也不会有问题,已测试
2> .list ul 的宽度设置为
330px ,这样好容纳一行3个li的宽度

举例说明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
ul{list-style:none}
.list{overflow:hidden;width:320px;background:#CCCCCC}
.list ul{width:330px}
.list ul li{float:left;width:100px;height:100px;line-height:100px;margin: 0 10px 10px 0 ;background:#FF6600;text-align:center;color:#fff}
</style>
</head>
<body>
<div class="list">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/laneyfu/p/4193118.html