小技巧 左边固定右边自适应"/>
css 布局小技巧 左边固定右边自适应
在页面布局或者是列表布局中,我们经常出现一个场景:左边是固定宽度的盒子,右边自适应:
<div class="product_open"><label class="label">Open Product:</label>//这一列是固定宽度<ul class="check_game">//这一列自适应<li><label><input type="checkbox"> Racing</label></li><li><label><input type="checkbox"> 4D</label></li><li><label><input type="checkbox"> Mark6</label></li><li><label><input type="checkbox"> Poker</label></li></ul> </div>
.label{width:100px;display:block;float: left;text-align: right; } .check_game{list-style: none;margin-left: 120px;//两列之间留有20px-webkit-user-select: none; }
这是博主推荐的方法,当然也有很多其他方法,比如让左右盒子都display:inline-block; 给左边的设定宽度,然后给右边的盒子width:100%;margin-right:-左边盒子宽度-间隙;
最近硝烟四起,作为一个小菜鸟,要更加努力学习才行,目标今年看完犀牛书。读书养性
更多推荐
css 布局小技巧 左边固定右边自适应
发布评论