css多种方式实现等宽布局
王景迁 2019-06-30
本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。
1、使用table-cell实现(兼容ie8)
<style>
body,div{
margin: 0;
padding: 0;
}
.table-layout{
display: table;/*父元素必须设置为table*/
table-layout: fixed;/*这个属性一定要有，否则达不到效果*/
width: 50%;
margin: 20px auto;
}
.table-cell-layout{
display: table-cell;/*子元素必须设置为table-cell*/
height: 40px;
border: 1px solid #666;
border-left: none;
}
.table-cell-layout:first-child{
border-left: 1px solid #666;
}
</style>
<body>
<ul class="table-layout">
<li class="table-cell-layout">li1</li>
<li class="table-cell-layout">li2</li>
<li class="table-cell-layout">li3</li>
<li class="table-cell-layout">li4</li>
<li class="table-cell-layout">li5</li>
</ul>
</body>2、使用flex布局来实现
<style>
body,div{
margin: 0;
padding: 0;
}
.flex-layout{
display: flex;
width: 50%;
margin: 20px auto;
}
.flex-item{
flex: 1;
height: 40px;
border: 1px solid #666;
border-left: none;
}
.flex-item:first-child{
border-left: 1px solid #666;
}
</style>
<body>
<ul class="flex-layout">
<li class="flex-item">li1</li>
<li class="flex-item">li2</li>
<li class="flex-item">li3</li>
<li class="flex-item">li4</li>
<li class="flex-item">li5</li>
</ul>
</body> 
相关推荐
qiupu 0喜欢 / 0评论 2020-11-04
多读书读好书 0喜欢 / 0评论 2020-11-03
RedCode 0喜欢 / 0评论 2020-10-28
jiedinghui 0喜欢 / 0评论 2020-10-25
Ladyseven 0喜欢 / 0评论 2020-10-22
hellowzm 0喜欢 / 0评论 2020-10-12
zuncle 0喜欢 / 0评论 2020-09-28
Ladyseven 0喜欢 / 0评论 2020-09-11
jiedinghui 0喜欢 / 0评论 2020-09-07
xiaohuli 0喜欢 / 0评论 2020-09-02
葉無聞 0喜欢 / 0评论 2020-09-01
impress 0喜欢 / 0评论 2020-08-26
ThikHome 0喜欢 / 0评论 2020-08-24
nicepainkiller 0喜欢 / 0评论 2020-08-20
aSuncat 0喜欢 / 0评论 2020-08-19
hellowzm 0喜欢 / 0评论 2020-08-18
zengni 0喜欢 / 0评论 2020-08-17
李鴻耀 0喜欢 / 0评论 2020-08-17
AlisaClass 0喜欢 / 0评论 2020-08-09
myloveqiqi 0喜欢 / 0评论 2020-08-09
csstpeixun 0喜欢 / 0评论 2020-08-07
NARUTOLUOLUO 0喜欢 / 0评论 2020-08-03
yaodilu 0喜欢 / 0评论 2020-08-03
buttonChan 0喜欢 / 0评论 2020-08-02
lanzhusiyu 0喜欢 / 0评论 2020-08-01
xvzhengyang 0喜欢 / 0评论 2020-07-30
drdrsky 0喜欢 / 0评论 2020-07-29
Phoebe的学习天地 0喜欢 / 0评论 2020-07-28
zhanghaibing00 0喜欢 / 0评论 2020-07-28
xiaohuli 0喜欢 / 0评论 2020-07-28
somboy 0喜欢 / 0评论 2020-07-27
Ladyseven 0喜欢 / 0评论 2020-07-25
teresalxm 0喜欢 / 0评论 2020-07-25
xvzhengyang 0喜欢 / 0评论 2020-07-25
nicepainkiller 0喜欢 / 0评论 2020-07-24
AlisaClass 0喜欢 / 0评论 2020-07-19
hellowzm 0喜欢 / 0评论 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 0喜欢 / 0评论 2020-07-19
zhanghao 0喜欢 / 0评论 2020-07-19
lanzhusiyu 0喜欢 / 0评论 2020-07-19
骆驼的自白 0喜欢 / 0评论 2020-07-18
lanzhusiyu 0喜欢 / 0评论 2020-07-19
hellowzm 0喜欢 / 0评论 2020-07-19
waterv 0喜欢 / 0评论 2020-07-18
CSSEIKOCS 0喜欢 / 0评论 2020-07-18
lanzhusiyu 0喜欢 / 0评论 2020-07-18