label和input

1、label和input

默认label标签和input(可以设置高度)是垂直居中

label浮动后通过padding来设置使其居中

2、label和radio

默认label和radio是不对齐的，通过margin来对齐

label为行内元素，设置宽高不生效，当radio有高度设置时，同时将label和radio设置vertical-align：middle

3、单选按钮

name代表为同一个选项

<label for="A">选项A</label><input type="radio" id='A' name='A' value='A'>
<label for="B">选项B</label><input type="radio" id='B' name='A' value='B'>
<label for="C">选项C</label><input type="radio" id='C' name='A' value='C'>
<label for="D">选项D</label><input type="radio" id='D' name='A' value='D'>

嵌套写法

<label>选项A<input type="radio" name='A' value='A'></label>
<label>选项B<input type="radio" name='A' value='B'></label>
<label>选项C<input type="radio" name='A' value='C'></label>
<label>选项D<input type="radio" name='A' value='D'></label>

4、label的对齐方式

参考地址：blog.csdn.net/qq_42564846…

label{
    display:inline-block;
    width；50px;
    text-align-last：justify;
}

分散两端对齐

text-align-last:justify;

<label for="" style='display:inline-block;width: 100px;text-align-last: justify'>用户名</label>：<input type="text"><br>
<label for="" style='display:inline-block;width: 100px;text-align-last: justify;'>密码</label>：<input type="text">

用户名：

密码：

text-align

left:左对齐
right:右对齐
enter:居中对齐
justify:两端对齐
        如果内容是多于一行的时候，除了最后一行，都是两端对齐的效果;
        对强制换行的文本不起作用

text-align-last：规定如何对齐文本的最后一行