CODEWITHSUNDEEP
htmlcss
casillas
casillas

Reputation: 16793

Align Label with respect to TextField

I want my firstLabel to be just right side of the textfield on the same line.

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

Upvotes: 0

Views: 58

Answers (3)

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

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;
}

Upvotes: 2

Zack
Zack

Reputation: 580

Form controls are inline elements so if you just put your label tag after the textbox input control then they'll line up on their own(unless you set the width of the parent element too narrow for them both to fit naturally.

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

No need for CSS to position them this way, they float left by default.

Upvotes: 1

Ashish
Ashish

Reputation: 743

Try this-

CSS Code-

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;
    }

Fiddle - http://jsfiddle.net/Ashish_developer/gjamenoy/

In fiddle, I have changed the color of label since fiddle's background is white, so giving white color to label will not show it. Just to show it in fiddle I have given color black to it.

Upvotes: 2

Related Questions