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%，加上它的填充，加上它的边框。