<style type="text/css">
.content_b {
display: table;
width: 100%;
margin:0;
padding:0
}
.content_b li {
display: table-cell;
border: 1px solid #ccc;
text-align: center;
height: 100px;
border-right: none;
line-height: 100px;
}
</style>
<ul class = "content_b">
<li>我</li>
<li>横</li>
<li>向</li>
<li>布</li>
<li>局</li>
<li>了</li>
.content_b {
display: table;
width: 100%;
margin:0;
padding:0
}
.content_b li {
display: table-cell;
border: 1px solid #ccc;
text-align: center;
height: 100px;
border-right: none;
line-height: 100px;
}
</style>
<ul class = "content_b">
<li>我</li>
<li>横</li>
<li>向</li>
<li>布</li>
<li>局</li>
<li>了</li>
</ul>
说明:display: table当用到横向布局而不想使用浮动的时候可以用它,非常好用。
本文介绍了一种使用CSS的display:table属性实现横向布局的方法,这种方法适用于不需要使用浮动的情况,为网页设计提供了灵活且实用的选择。
919

被折叠的 条评论
为什么被折叠?



