这是之前的页面效果：

添加红色部门的代码后：

<head>

    <meta name="viewport" content="width=device-width" />

    <title></title>

    <style>

        label{

            display:inline-block;         /*让所有的label对齐，但必须设置宽度;*/

            width:100px;

        }

        input{

            border:1px solid rgba(,,,.);

            border-radius:3px;

            height:34px;

            background-color:gainsboro;

            color:white;

            padding: 10px;            /*上下内边距为0，左右内边距为10px*/

        }

        #infoPanel div{

            text-align:center;

            margin: auto;

            height:60px;

        }

        #infoPanel {

            position:relative;

            width:500px;

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

最终的显示效果：

多个div中的label标签对齐的更多相关文章

  1. HTML DIV中文字自动换行 , 顶部对齐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  2. form中label标签对齐，内容右对齐

    给label设置一个固定长度即可: label{      display:inline-block;      width:100px; text-align:right;    }

  3. label标签使用过程中遇到的问题

    最近在做东西时候使用到了label标签,由于之前很少使用label标签,所以就遇到一个很奇怪的问题.什么问题呢?下面来看一个效果 <!DOCTYPE html> <html> ...

  4. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  5. HTML中Div、span、label标签的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  6. 控制label标签的宽度,不让它换行 label标签左对齐

    1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...

  7. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  8. Asp.net MVC中关于@Html标签Label、Editor使用

    @Html帮助器简单说明,记录些基本的跟HTML中对应的@html帮助器,@Html基本包含了html中的表单控件和常用Html在@Html中,带有For的主要是针对强类型的Html类型.用于说明@H ...

  9. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

随机推荐

  1. oc中的枚举

    如果一个变量只有几种可能的值,比如星期有几天,一年有几个季节等.这个时候可以用枚举变量. 先定义类型再定义变量,如:enum siji{chun,xia,qiu,dong} 也可以定义匿名:enum{ ...

  2. 全网最详细的Sublime Text 3的激活（图文详解）

    不多说,直接上干货! 前期博客 全网最详细的Windows里下载与安装Sublime Text *(图文详解) ZYNGA INC. User License EA7E- 927BA117 84C93 ...

  3. 主键映射和Hibernate映射

    组件映射 类组合关系的映射,也叫做组件映射! 注意:组件类和被包含的组件类,共同映射到一张表! 需求: 如汽车与车轮 代码示例: 1.JavaBean Wheel.java package com.g ...

  4. 进程间通信 IPC（Inter-Process Communication）

    目录 一.管道 二.FIFO 三.消息队列 四.信号量 五.共享存储 六.网络IPC:套接字   一.管道 管道是进程间通信中最古老的方式,所有UNIX都提供此种通信机制.管道有以下两种局限性: 历史 ...

  5. linux wheel组

    wheel 组的概念 wheel 组的概念继承自 UNIX.当服务器需要进行一些日常系统管理员无法执行的高级维护时,往往就要用到 root 权限:而“wheel” 组就是一个包含这些特殊权限的用户池: ...

  6. Restful API 设计参考原则

    在项目中,需要为后台服务撰写API.刚开始接触的时候,并没有考虑太多,就想提供URL,服务端通过该URL进行查询.创建.更新等操作即可.但再对相关规范进行了解后,才发现,API的设计并没有那么简单,远 ...

  7. switch-case最容易忽视的一点

    switch语句是常用的一种java语法,但是往往最基本的,总是最容易被人们忽略. 首先,看下switch语句的基本结构: switch(表达式){ case 常量1: 语句1; break; cas ...

  8. [NOI 2016]国王饮水记

    Description 题库链接 给出 \(n\) 个水杯,每个水杯装有不同高度的水 \(h_i\) ,每次可以指定任意多水杯用连通器连通后断开,问不超过 \(k\) 次操作之后 \(1\) 号水杯的 ...

  9. 我进行jvm内存调优的一些记录

    jvm内存调优的一些记录 java内存调优的方法和过程 可以使用 jmap -heap pid号 查看,例如pid是9300,执行的结果可能是这样的. root@ubuntu:~# jmap -hea ...

  10. RowFilter遇上特殊字符*%'[]\

    开发时,时不时需要分析DataView的数据.计算,过滤等 .但是处理的值有可能会遇上是带有特殊字符*.%.'.[.]和\ .需要手动在表达式中,处理这些特殊字符,需要再使用"[" ...