多个div中的label标签对齐

最新推荐文章于 2024-04-17 15:52:49 发布

weixin_30832983

最新推荐文章于 2024-04-17 15:52:49 发布

阅读量1.4k

点赞数

原文链接：http://www.cnblogs.com/likui-bookHouse/p/8630960.html

版权

这是之前的页面效果：

添加红色部门的代码后：

<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>

最终的显示效果：

转载于:https://www.cnblogs.com/likui-bookHouse/p/8630960.html

weixin_30832983

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
多个div中的label标签对齐

这是之前的页面效果：添加红色部门的代码后：<head> <meta name="viewport" content="width=device-width" /> <title></title> <style> label{ display:i...
复制链接

扫一扫