将标签与TextField对齐

Question

我希望我的firstLabel位于同一行的文本字段的右侧。

    //css
    input[type="text"]{
    display:block;
    margin-bottom:10px;
    width: 50px;
    text-align:center;
    float:center;
    }

    label {
    float: right;
    text-align:right;
    color: white;
    font:12;
    } 

  //html
  <label for="first">First Value</label> 
  <input type="text" value="93" id="firstTF"/><br/>

Answer 1

试试这个 -

CSS代码 -

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

    label {
     display: inline;    
    text-align:right;
    color: white;
    font:12;
    } 

小提琴 - http://jsfiddle.net/Ashish_developer/gjamenoy/

在小提琴中，我改变了标签的颜色，因为小提琴的背景是白色的，所以给标签的白色不会显示它。只是为了把它展示在小提琴里，我给它涂上了黑色。

Answer 2

http://jsfiddle.net/x3gb6gcw/2/

HTML

<input type="text" value="93" id="firstTF"/>
<label for="first">First Value</label> 

CSS

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

label {
    text-align:left;
    color: #000;
    font:12;
    display:inline-block;
} 

Answer 3

表单控件是内联元素，因此如果您只是将标签标签放在文本框输入控件之后，那么它们将自行排列（除非您将父元素的宽度设置得太窄以至于它们都不能自然适合。< / p>

<input type="text" id="myText"/><label for="myText">My Label</label>

不需要CSS以这种方式定位它们，它们默认向左浮动。