css - チェックボックス付きのCSSレイアウト

Question

チェックボックスを追加したいときにレイアウトに問題があります。

CSS：

p label {
    vertical-align: middle;
    width: 100px;
    display: inline-block;
    /*display: block;
    padding-top: 8px;
    float: left;*/
}

HTML：

<p>
    <label for="a">a:</label>
    <select name="a" id="a" class="select">
        <option value="">Choose</option>
    </select>
</p>
<p>
    <label for="s">s:</label>
    <select name="s" id="s" class="select">
        <option value="">Choose</option>
    </select>
</p>
<p>
    <label for="d">d:</label>
    <input id="1" type="checkbox" name="looking_for[]" value="1" />
    <label class="no_float" for="1">Friends</label>
    <input id="2" type="checkbox" name="looking_for[]" value="2" />
    <label for="2">Friends</label>
</p>

私はそれが次のように見えることを望んでいます

便宜上、 jsfiddleを追加しました。

score 1 · Accepted Answer

チェックボックスに「id=1およびid=2」を使用しました。IDには数字が機能しないため、これが1つの理由になる可能性があります。意味のある名前、文字または文字列を付けるようにしてください。

score 0 · Accepted Answer

このようなものをお探しですか？http://jsfiddle.net/3LW8D/1/より少ないdivsとより多くのcssで実行される可能性がありますが、画像リンクが機能しないため、私はあなたが探しているものを推測しているだけです。;）

score 0 · Accepted Answer

多分これはあなたが意味したことです、

http://jsfiddle.net/3LW8D/3/

use container div.

「user1823799」の答えは非常に似ていますが、アプローチにかなりの違いがあり、彼の例では段落タグがめちゃくちゃになっているので、車輪の再発明をしました。

問題に戻って、常に特定のサイズのコンテナdivを作成し、要素を配置する場所に正しく配置されていることを確認します。位置が正しくない場合は、margin/positionプロパティを使用して修正できます。、次に、このコンテナdivに小さな要素をネストします。

score 0 · Accepted Answer

これはあなたのためにうまくいくでしょう

a：選択

s：選択

d：

<input id="first" type="checkbox" name="looking_for[]" value="1" />Friends<br />

<input id="second" type="checkbox" name="looking_for[]" value="2" />Friends<br />

</p>

そしてcssはこのようになります

p label {
vertical-align: middle;
width: 100px;
display: inline-block;}

#second{margin-left:108px;}

/*display: block;
padding-top: 8px;
float: left;*/
}

css - チェックボックス付きのCSSレイアウト

4 に答える 4

Related

Reference