您现在的位置:首页 >> 前端 >> 内容

关于表单的深入理解:单选框和复选框与文字的垂直居中、表单对齐等

时间:2018/4/25 14:27:03 点击:

  核心提示:一、单选框和复选框与文字的垂直居中1、语法元素{vertical-align:像素值;}2、例(1)当文字大小为12px时,定义单选框和复选框为vertical-align:-3px;(2)当文字大小...

一、单选框和复选框与文字的垂直居中

1、语法

  元素
  {
    vertical-align:像素值;
  }

2、例

(1)当文字大小为12px时,定义单选框和复选框为“vertical-align:-3px”;

(2)当文字大小为14px时,定义单选框和复选框为“vertical-align:-2px”;

3、解释:vertical-align:-3px是相对于基线而言向下移动3px。

二、文本域的固定大小、禁止移动和相同外观

1、固定大小

使用最大/最小高度/宽度设置大小

  textarea{
    width:200px;
    height:80px;
    max-width:200px;
    max-height:160px;
  }

2、禁止移动

  textarea{
    width:200px;
    height:80px;
    resize:none;
  }

3、外观相同

(1)先使用width和height定义大小

(2)使用“overflow:auto”定义滚动自适应

  textarea{
    width:200px;
    height:80px;
    overflow:auto;
    resize:none;
  }

三、表单对齐

方法:

(1)每一行表单分为左栏加若干右栏;左栏的长度相同,右栏的长度总长相同

(2)左右两栏都设置为浮动

(3)左栏text-align属性定义为right,使文字右对齐

(4)左右两栏的总长度(padding、margin、border、width)等于盒子的宽度,

作者:网络 来源:一风