CODEWITHSUNDEEP
htmlcss
casillas
casillas

Reputation: 16813

Text Field Alignment with Label

I would like my label aligns with corresponding textfield. However snippet code that I posted here, returns me the following UI. Actually first row (20 --> First) is the right format that I want to implement.

enter image description here

Updated Figure based on Rafael answer. I have limited space to display these elements. It seems to me that wherever I have more than 6 characters, it does not fir into allocated space. But I do not how to fix

enter image description here

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


label {
       color: white;
       display: inline-block;
}

ul {
padding: 0;
list-style-type: none;
} 


<ul>
<li><label for="first">First</label><input type="text" value="Loading..." id="firstTF"/></li>
<li><label for="second">Second</label><input type="text" value="Loading..." id="secondTF"/></li>
<li><label for="third">Third</label><input type="text" value="Loading..." id="thirdTF"/></li>
<li><label for="fourth">Fourth</label><input type="text" value="Loading..." id="fourthTF"/></li>
<li><label for="fifth">Fifth</label><input type="text" value="Loading..." id="fifthTF"/></li>
<li><label for="sixth">Sixth</label><input type="text" value="Loading..." id="sixthTF"/></li>        <li><label for="seventh">Seventh</label><input type="text" value="Loading..." id="seventhTF"/>  </li>
  </ul>

Upvotes: 0

Views: 48

Answers (2)

Rafael Eyng
Rafael Eyng

Reputation: 4970

You could put your label after your input, couldn't you? And then, remove the float: left from the inputs.

JSFiddle

If you don't want to change the order of the elements, you could add an overflow: hidden to your li, like this JSFiddle

Edit

About your edit: that depends on how you want to solve it. What do you want to do when the text is bigger than the space that you have to display it?

You could, for instance, set a max-width and hide any text that overflows it, like this JSFiddle

Upvotes: 2

Aurel76
Aurel76

Reputation: 36

Here comes the expected results :

enter image description here

<style type="text/css">

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

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

ul {
  padding: 0;
  list-style-type: none;
  float: left;
} 
</style>    

<ul>
<li><div id="ligne"><label for="first">First</label><input type="text" value="Loading..." id="firstTF"/></div></li>
<li><label for="second">Second</label><input type="text" value="Loading..." id="secondTF"/></li>
<li><label for="third">Third</label><input type="text" value="Loading..." id="thirdTF"/></li>
<li><label for="fourth">Fourth</label><input type="text" value="Loading..." id="fourthTF"/></li>
<li><label for="fifth">Fifth</label><input type="text" value="Loading..." id="fifthTF"/></li>
<li><label for="sixth">Sixth</label><input type="text" value="Loading..." id="sixthTF"/></li>        
<li><label for="seventh">Seventh</label><input type="text" value="Loading..." id="seventhTF"/>  </li>
  </ul>

Upvotes: 2

Related Questions