html - 如何在 li 中显示内联输入？

Question

HTML：

<div id="options">
    <ul>
        <li>
            <label for="input_color">Input Color</label>
            <input type="text" id="input_color">
        </li>
        <li>
            <label for="output_color">Output Color</label>
            <input type="text" id="output_color">
        </li>
        <li>
            <label for="pixels">Pixels to the left</label>
            <input type="text" id="pixels">
        </li>
        <li>
            <label for="pixels">Speed (in second)</label>
            <input type="text" value="0.02" id="speed">
        </li>
        <li>
            <input type="submit" value="Reset" class="submit">
        </li>
    </ul>
</div>

CSS：

div#options ul, div#options li{
    margin:0; 
    padding:0; 
    list-style:none;
}
div#options li{
    clear: both;
    list-style:none;
    padding-bottom:30px;
    white-space: nowrap;
}

div#options input{
    float:left;
    width: 50%;
}
div#options label{
    float:left;
    width: 50%;
}

我需要在标签旁边显示输入，但它总是出现在它下面 - 如何修复它？

Answer 1

从输入和标签中删除填充、边距和边框，或者使它们的宽度都小于 50%。

它们不能并排放置，盒子模型将（至少<input>）宽于 50%：它占用的空间将是其容器宽度的 50%，加上它的填充，再加上它的边框。

Answer 2

Keep your li's in div to get them side-by-side. and give width:100%; instead of width:50%;.

div{width:50%;float:left;}

Fiddle