html怎么让导航栏平均分布,CSS 怎么让按钮平均分布

CSS 怎么让按钮平均分布

等分布局是指子元素平均分配父元素宽度的布局方式, 本文将介绍实现等分布局的 4 种方式

一, float

缺点: 结构和样式存在耦合性, IE7 - 浏览器下对宽度百分比取值存在四舍五入的误差(相关课程推荐:CSS视频教程https://www.html.cn/css/ )

1.float+padding+background-clip

使用 padding 来实现子元素之间的间距, 使用 background-clip 使子元素 padding 部分不显示背景

body,p{margin:0;}

.parentWrap{

overflow:hidden;

}

.parent{

margin-right:-20px;

overflow:hidden;

}

.child{

float:left;

height:100px;

width:25%;

padding-right:20px;

box-sizing:border-box;

background-clip:content-box;

}

1