分类导航

关于label和input对齐的那些事

发布时间：2017年03月14日作者：文章转自网络，版权归原作者所有，反馈可立刻删除 (该文来自笔记，点击查看原文)

默认状态下，也就是下面这样, 文字和input是居中的。

<div>
    <label>我是中国人</label>
    <input type="text"></div>

但是经常设计图中有label的行高，或者input的高度设计，默认状态下，依然是居中的。但是很多时候label和input要浮动，一旦浮动，后面的input标签就紧紧的贴住了label标签，也就造成了视觉上看到并没有居中。

比如下面：

<div>
    <label>我是中国人</label>
    <input type="text"></div>label {
    font-size: 12px;    float: left;
}input {    height: 20px;
}