如何在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％，< em> plus 其填充，加上其边框。

Answer 2

将li放在div中，让他们并排。 并提供width:100%;代替width:50%;。

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

<强> Fiddle