TextFields与标签对齐 [英] TextFields align with labels

问题描述

我希望所有文本字段和相应的标签位于同一行上。

 < style> 
 input [type =text] {
 display：inline; 
 margin-bottom：10px; 
 width：50px; 
 text-align：center; 
 float：left; 
} 
标签{
 display：inline; 
 text-align：right; 
颜色：黑色; 
} 
< / style> 
 
< input type =textvalue =Loading ...id =firstTF/>< label for =first>第一个< / label> 
< input type =textvalue =Loading ...id =secondTF/>< label for =first> Second< / label> 
< input type =textvalue =Loading ...id =thirdTF/>< label for =first>第三< / label> 
< input type =textvalue =Loading ...id =fourthTF/>< label for =first> Fourth< / label> 
< input type =textvalue =Loading ...id =fifthTF/>< label for =first> Fifth< / label> 
< input type =textvalue =Loading ...id =sixthTF/>< label for =first>第六< / label> 
< input type =textvalue =Loading ...id =seventhTF/>< label for =first>第七< / label> 
  

解决方案

$ c $> display：inline-block; 并将 clear：left; 添加到输入中。

  input [type =text] {display：inline; margin-bottom：10px; width：50px; text-align：center; float：left; clear：left;} label {display：inline-block;向左飘浮; text-align：right;颜色：黑色; }  

< input type =textvalue = Loading ...id =firstTF/>< label for =first>首先< / label>< input type =textvalue =Loading ...id =secondTF/ >< label for =first> Second< / label>< input type =textvalue =Loading ...id =thirdTF/>< label for =first> ;第三< / label>< input type =textvalue =Loading ...id =fourthTF/>< label for =first> Fourth< / label>< input type = textvalue =Loading ...id =fifthTF/>< label for =first> Fifth< / label>< input type =textvalue =Loading ... id =sixthTF/>< label for =first>第六< / label>< input type =textvalue =Loading ...id =seventhTF/>< label for =first>第七< / label>

I want all textfields and correspondings label to be on the same line.

<style>
    input[type="text"] {
        display: inline;
        margin-bottom: 10px;
        width: 50px;
        text-align: center;
        float: left;
    }
    label {
        display: inline;
        text-align: right;
        color: black;
    }
</style>

<input type="text" value="Loading..." id="firstTF"/><label for="first">First</label>
<input type="text" value="Loading..." id="secondTF"/><label for="first">Second</label>
<input type="text" value="Loading..." id="thirdTF"/><label for="first">Third</label>
<input type="text" value="Loading..." id="fourthTF"/><label for="first">Fourth</label>
<input type="text" value="Loading..." id="fifthTF"/><label for="first">Fifth</label>
<input type="text" value="Loading..." id="sixthTF"/><label for="first">Sixth</label>
<input type="text" value="Loading..." id="seventhTF"/><label for="first">Seventh</label>

解决方案

You could float both elements left, set display: inline-block; and add clear:left; to the input.

input[type="text"]{
display:inline;
margin-bottom:10px;
width: 50px;
text-align:center;
float:left;
  clear: left;
}

    label {
        display: inline-block;
      float: left;
        text-align: right;
        color: black;
    }

<input type="text" value="Loading..." id="firstTF"/><label for="first">First</label>
<input type="text" value="Loading..." id="secondTF"/><label for="first">Second</label>
<input type="text" value="Loading..." id="thirdTF"/><label for="first">Third</label>
<input type="text" value="Loading..." id="fourthTF"/><label for="first">Fourth</label>
<input type="text" value="Loading..." id="fifthTF"/><label for="first">Fifth</label>
<input type="text" value="Loading..." id="sixthTF"/><label for="first">Sixth</label>
<input type="text" value="Loading..." id="seventhTF"/><label for="first">Seventh</label>

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