1

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%;
}

画像

ラベルの横に入力を表示する必要がありますが、常にその下に表示されます-修正するにはどうすればよいですか？

4

2 に答える 2

2

入力とラベルからパディングとマージンと境界線を削除するか、両方の幅を50％未満にします。

両方を並べて配置することはできません。ボックスモデルは（少なくとも<input>）50％より広くなります。それが占めるスペースは、コンテナの幅の50％、パディング、および境界線になります。

于 2013-01-28T15:12:40.107 に答える
1

それらを並べて取得するためにあなたliのを保持します。の代わりにdiv与えます。width:100%;width:50%;

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

フィドル

于 2013-01-28T15:23:16.167 に答える