Question

HTML code

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

我想将我的几个月的复选框分为三组，每组四个。这样它就会出现在几个月的垂直列表中。如果我删除了内部div复选框，则不会在所有三行中对齐。

Answer 1

选中此JSBIN

这是非常基本的方式来实现这个

Answer 2

用于 white-space:nowrap 和 display:inline-block;

就像这样

#groupfour{
white-space:nowrap;
}

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

<强> Demo

<强> Demo-2

Answer 3

您可以使用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>

在HTML中以四个一组对齐复选框

HTML code

CSS代码

3 个答案: