标签：
对于如下的界面，介绍一种实现方式。
可以将整个界面分为三块，左中右。通过display: inline-block;和float: right;左右浮动效果实现。
代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> .peopleinfo { text-align: center; } .peopleinfo>div { display: inline-block; } .attribute>label { float: right; margin-bottom: 6px; } .infodetail>input { float: left; } .comment>label { float: left; margin-bottom: 6px; } </style> </head> <body> <div class="container" style="border:1px dotted #ccc; width: 400px;margin-top: 100px"> <div class="peopleinfo"> <div class="attribute"> <label for="name">姓名：</label><br/> <label for="phone">电话：</label><br/> <label for="email">邮箱：</label><br/> <label for="address">地址：</label><br/> <label for="idcard">身份证：</label><br/> <label for="othercard">其他证件：</label><br/> <label for="note">备注：</label><br/> </div> <div class="infodetail"> <input type="text" id="name" name="name" /><br/> <input type="tel" id="phone" name="phone" /><br/> <input type="email" id="email" name="email" /><br/> <input type="text" id="address" name="address" /><br/> <input type="text" id="idcard" name="idcard" /><br/> <input type="text" id="othercard" name="othercard" /><br/> <input type="text" id="note" name="note" /><br/> </div> <div class="comment"> <label>*</label><br/> <label>*</label><br/> <label></label><br/> <label></label><br/> <label></label><br/> <label></label><br/> <label></label><br/> </div> </div> </div> </body> </html>
你
标签：
原文地址：http://www.cnblogs.com/weilunhui/p/4573655.html
