How can I ensure my labels are aligned with the corresponding textfields? The snippet of code that I've posted is resulting in a UI layout that I'm not satisfied with. The formatting of the first row (20 --> First) is actually what I want to achieve.
I have made updates based on Rafael's answer. Due to limited space, it seems that text longer than 6 characters does not fit correctly within the allocated area. I'm unsure how to resolve this issue.
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>