css小知识---input输入块

对于如下的界面，介绍一种实现方式。

m

可以将整个界面分为三块，左中右。通过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>
posted @ 2015-06-13 16:15  小样儿1020  阅读(446)  评论(0)  编辑  收藏  举报