html - Text Field Alignment with Label -

html - Text Field Alignment with Label -

i label aligns corresponding textfield. snippet code posted here, returns me next ui. first row (20 --> first) right format want implement.

updated figure based on rafael answer. have limited space display these elements. seems me wherever have more 6 characters, not fir allocated space. not how fix

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>

you set label after input, couldn't you? , then, remove float: left inputs.

jsfiddle

if don't want alter order of elements, add together overflow: hidden li, this jsfiddle

edit

about edit: depends on how want solve it. want when text bigger space have display it?

you could, instance, set max-width , hide text overflows it, this jsfiddle

html css