HTML Code:
<div id="choices">
<ul>
<li>
<label for="input_size">Input Size</label>
<input type="text" id="input_size">
</li>
<li>
<label for="output_size">Output Size</label>
<input type="text" id="output_size">
</li>
<li>
<label for="distance">Distance to the right</label>
<input type="text" id="distance">
</li>
<li>
<label for="time">Time (in seconds)</label>
<input type="text" value="0.02" id="time">
</li>
<li>
<input type="submit" value="Refresh" class="submit">
</li>
</ul>
</div>CSS Styles:
#choices ul, #choices li {
margin: 0;
padding: 0;
list-style: none;
}
#choices li {
clear: both;
list-style: none;
padding-bottom: 30px;
white-space: nowrap;
}
#choices input {
float: left;
width: 50%;
}
#choices label {
float: left;
width: 50%;
}Problem Statement:
I'm having trouble displaying the input fields next to their respective labels as they keep appearing below them. How can I resolve this issue?