将标签与TextField对齐

时间:2014-10-23 20:31:03

标签: html css

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

enter image description here

    //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/>

3 个答案:

答案 0 :(得分:2)

试试这个 -

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/

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

答案 1 :(得分: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;
} 

答案 2 :(得分:1)

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

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

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