-2

HTMLコード

<div  id=checkbox>
    <div id=groupfour>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jan" id="EJan">
            <label>Jan </label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Feb" id="EFeb">
            <label>Feb</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Mar" id="EMar">
            <label>Mar</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Apr" id="EApr">
            <label>Apr</label>
        </div>
    </div>

    <div id=groupfour>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="May" id="EMay">
            <label>May</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jun" id="EJun">
            <label>Jun</label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Jul" id="EJul">
            <label>Jul </label>
        </div>
        <div id=groupone>
            <input type="checkbox"  checked="checked" name="Mapmashup" value="Aug" id="EAug">
            <label>Aug</label>
        </div>
    </div>

CSSコード

#groupfour
{
    position:relative;
    vertical-align: bottom;
}

月のチェックボックスを3行に4つのグループにグループ化したい。このようにして、月の垂直リストに表示されます。内部divを削除すると、チェックボックスが3行すべてで整列されません。

4

3 に答える 3

1

このJSBINを確認してください

これを作るための非常に基本的な方法

于 2012-12-10T12:18:16.983 に答える
0

に使用され white-space:nowrap 、 display:inline-block;

このように

#groupfour{
white-space:nowrap;
}

#groupfour #groupone{
display:inline-block;
}

デモ

デモ-2

于 2012-12-10T12:13:48.437 に答える
0

あなたはcssを使用してそれを達成することができます

<style>
.groupone{
    float: left;
}
.groupfour{
    clear: left;
}
</style>

また、同じdivを同時に呼び出すため、すべての「id」を「class」に変更します。

<div class="groupfour">
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Jan" class="EJan">
                    <label>Jan </label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Feb" class="EFeb">
                    <label>Feb</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Mar" class="EMar">
                    <label>Mar</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Apr" class="EApr">
                    <label>Apr</label>
                </div>
            </div>

            <div class="groupfour">
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="May" class="EMay">
                    <label>May</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Jun" class="EJun">
                    <label>Jun</label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Jul" class="EJul">
                    <label>Jul </label>
                </div>
                <div class="groupone">
                    <input type="checkbox"  checked="checked" name="Mapmashup" value="Aug" class="EAug">
                    <label>Aug</label>
                </div>
            </div>
于 2012-12-10T12:16:50.587 に答える