首页 > 代码库 > 左右浮动边距为0，中间间隔一定
左右浮动边距为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>
左右浮动边距为0，中间间隔一定
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。