1.实现两个div并排显示
案例：checkbox的标题和内容需要并排显示，checkbox竖向排列
<head> <style type="text/css"> .curr_box { margin-top: 10px; } .row1 { float: right; width: 65%; position: relative; } label { float: left; height: 17px; width: 25%; text-align: center; margin-top: 5px; } .checkbox-inline1 { margin-bottom: 0; font-weight: normal; vertical-align: middle; cursor: pointer; width: 78%; } </style> <title>我的第一个 HTML 页面</title> </head> <body> <div class="curr_box"> <div> <label>有无肇事肇祸行为</label> </div> <div class="row1"> <div class="checkbox-inline1"> <input type="checkbox" name="isPsychoService" value="1"> 有肇事行为 </div> <div class="checkbox-inline1"> <input type="checkbox" name="isPsychoService" value="2"> 有肇祸行为 </div> <div class="checkbox-inline1"> <input type="checkbox" name="isPsychoService" value="3"> 轻度滋事 </div> </div> </div> </body> </html>
这里使用的是float浮动，只要子div的长度小于父div的长度，就可以实现并排效果
还有就是使用position进行绝对定位
<html> <head> <style type="text/css"> .curr_box { margin-top: 10px; } .row1 { width: 65%; margin-left: 150px; } label { position: absolute; height: 17px; width: 25%; text-align: center; margin-top: 5px; } .checkbox-inline1 { margin-bottom: 0; font-weight: normal; vertical-align: middle; cursor: pointer; width: 78%; } </style> <title>我的第一个 HTML 页面</title> </head> <body> <div class="curr_box"> <div> <label>有无肇事肇祸行为</label> </div> <div class="row1"> <div class="checkbox-inline1"> <input type="checkbox" name="isPsychoService" value="1"> 有肇事行为 </div> <div class="checkbox-inline1"> <input type="checkbox" name="isPsychoService" value="2"> 有肇祸行为 </div> <div class="checkbox-inline1"> <input type="checkbox" name="isPsychoService" value="3"> 轻度滋事 </div> </div> </div> </body> </html>
在这里提醒一点，如果绝对定位没有设置top,left属性的，该元素就是块级元素，会换行显示，如果加了top等属性，会以父元素最为参考系