我希望我的标签与我的输入字段垂直对齐 [英] I Want my Label to Vertically Align With my Input Field

问题描述

以下是我迄今所做的工作：

http：// jsfiddle。 net / 2RCBQ /

 < div id =main> 
< form> 
< label>名字：< input type =textid =firstname>< / label>< br /> 
< label>姓氏：< input type =textid =lastname>< / label>< br> 
< label>电子邮件：< input type =textid =email>< / label>< br /> 
< label>电话：< input type =textid =phone>< / label>< br /> 
< / form> 
< / div> 
  

CSS

  #main {
 width：300px; 
 
} 
 
 #main input {
 float：right; 
 display：inline; 
} 
 
＃主标签{
颜色：＃2D2D2D; 
 font-size：15px; 
 width：250px; 
 display：block; 
} 
  

目前，标签（左侧）输入字段（在右侧）。我想垂直对齐它们，以便在输入字段中间输入标签。

我试过垂直对齐，它不起作用。请帮我弄清楚这个问题。感谢。

解决方案

感觉嵌套< span> 不必要的标记。

display：inline-block 让< label> 和< input> ，就像 float：right 打破文件流程。如果你（或者用户的屏幕阅读器）想要改变 font-size ，那么它更加灵活并且允许更多的对齐控制。

编辑： jsfiddle

  label，input {display：inline-block; vertical-align：baseline; width：125px;} label {color：＃2D2D2D; font-size：15px;} form，input {box-sizing：border-box; -moz-box-sizing：border-box; -webkit-box-sizing：border-box;} form {width：300px;}  

 <形式> < label for =firstname>名字：< / label>< input type =textid =firstname> < label for =lastname> Last Name：< / label>< input type =textid =lastname> < label for =email>电子邮件：< / label>< input type =textid =email> < label for =phone>电话：< / label>< input type =textid =phone>< / form>  

Here is what my work is so far:

http://jsfiddle.net/2RCBQ/

<div id="main">
<form>
    <label>First Name:<input type="text" id="firstname"></label><br/>
    <label>Last Name:<input type="text" id="lastname"></label><br>
    <label>E-Mail:<input type="text" id="email"></label><br/>
    <label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>

CSS

#main {
    width:300px;

}  

#main input {
    float:right;
    display:inline;
}

#main label {
    color: #2D2D2D;
    font-size: 15px;
    width:250px;
    display: block;
}

Currently, the label (on the left) is kind of towards to top of the input field (on the right). I want to vertically align them so the label since in the middle of the input field.

I've tried vertical-align and it does not work. Please help me try to figure out the problem. Thanks.

解决方案

I feel nesting <span> adds a lot of unnecessary markup.

display: inline-block lets the <label> and <input> sit next to each other just like with float: right but without breaking document flow. Plus it's much more flexible and allows more control over alignment if you (or the user's screen reader) want to change the font-size.

Edit: jsfiddle

label, input {
    display: inline-block;
    vertical-align: baseline;
    width: 125px;
}

label {
    color: #2D2D2D;
    font-size: 15px;
}

form, input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

form {
    width: 300px;
}

<form>
    <label for="firstname">First Name:</label><input type="text" id="firstname">
    <label for="lastname">Last Name:</label><input type="text" id="lastname">
    <label for="email">E-Mail:</label><input type="text" id="email">
    <label for="phone">Phone:</label><input type="text" id="phone">
</form>

这篇关于我希望我的标签与我的输入字段垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！