1 2

多个div中的label标签对齐

这是之前的页面效果：

 

添加红色部门的代码后：

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>
        label{
            display:inline-block;         /*让所有的label对齐，但必须设置宽度;*/
            width:100px;
        }
        input{
            border:1px solid rgba(255,255,255,.8);
            border-radius:3px;
            height:34px;  
            background-color:gainsboro;
            color:white;
            padding:0 10px;            /*上下内边距为0，左右内边距为10px*/
        }
        #infoPanel div{
            text-align:center;
            margin:0 auto;
            height:60px;
            
        }
        #infoPanel {
            position:relative;
            width:500px;
            margin: 0 auto;
        }
    </style>
</head>

这是html代码：

 <div id="infoPanel">
        <form action="../Department/Add" method="post">
            <div class="sname">
                <label>部门名称</label>
                <input />
            </div>
            <div class="scode">
                <label>部门代码</label>
                <input />
            </div>
            <div class="scale">
                <label>部门规模</label>
                <input />
            </div>
            <div class="sduty">
                <label>职责</label>
                <input />
            </div>
            <div class="sphone">
                <label>电话号码</label>
                <input />
            </div>
            <div class="saddress">
                <label>详细地址</label>
                <input />
            </div>
            <div>
                <input type="submit" style="color:cadetblue;font-weight:bold;font-size:medium;" name="sbutton" value="新增部门" />
            </div>
        </form>

 最终的显示效果：

 

posted @ 2018-03-23 16:17  大海的泡沫  阅读(1146)  评论(0)    收藏  举报
1 2