多个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(,,,.);
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标签对齐的更多相关文章
- HTML DIV中文字自动换行 , 顶部对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- form中label标签对齐,内容右对齐
给label设置一个固定长度即可: label{ display:inline-block; width:100px; text-align:right; }
- label标签使用过程中遇到的问题
最近在做东西时候使用到了label标签,由于之前很少使用label标签,所以就遇到一个很奇怪的问题.什么问题呢?下面来看一个效果 <!DOCTYPE html> <html> ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍
定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...
- HTML中Div、span、label标签的区别
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...
- 控制label标签的宽度,不让它换行 label标签左对齐
1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- Asp.net MVC中关于@Html标签Label、Editor使用
@Html帮助器简单说明,记录些基本的跟HTML中对应的@html帮助器,@Html基本包含了html中的表单控件和常用Html在@Html中,带有For的主要是针对强类型的Html类型.用于说明@H ...
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
随机推荐
- 【JAVA】序列化
好处有2: 实现了数据的持久化,通过序列化可以把数据永久地保存到硬盘上(通常存放在文件里). 利用序列化实现远程通信,即在网络上传送对象的字节序列. 序列化ID的作用: 简单来说,Java的序列化机制 ...
- CCF 201509-3 模版生成系统
试题编号: 201509-3 试题名称: 模板生成系统 时间限制: 1.0s 内存限制: 256.0MB 问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的 ...
- golang内置数据类型作为函数参数
先上结论 golang的所有内置类型作为函数参数传递都是传值的方式(没有传递引用一说),需要注意的是:数组.slice和map作为函数参数时也是传值,但是如果对结构内元素进行的修改,修改的是原数据.如 ...
- double转换为int以及浮点型相加损失精度问题
最近在做支付相关模块的业务,数据库字段却使用的是double类型,其实也行,只要计算不在sql语句中进行,也是没有问题的. 预先的类属性设置的是Double类型,自己算的时候发现小数相加会出现损失精度 ...
- webpack4 自学笔记四(style-loader)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css 引入- ...
- 设置tabBar、使用第三方插件和自定义组件使用简单实例
创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...
- Pycharm---新建文件时 自动添加作者时间等信息
可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在“新建文件”对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ ...
- spring cloud zuul在使用中遇到的坑 : 转发时自动去掉prefix
在使用zuul的时候遇到的坑总结一下: 逐渐增加更新以后遇到的 1.在路由的时候莫名其妙的把serviceId给去掉,导致404.比如请求:/serviceId/search/book,zuul会把s ...
- Spring学习之路-从放弃到入门
AOP:方法拦截器 IOC:类管理容器 主要讲讲这一天看Spring视频学到的东西,以下的叫法全是自创的. 1.类实例管理容器 关于Spring,首先是对类的管理,在常规情况,生成一个类需要调用new ...
- Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置
1.ExtJs设置cookie两种方式 其一:设置cookie如下 saveacct=isForm.getForm().findField('itemselector').getValue(); Ex ...