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

我想将我的月份复选框分组为三行四个一组。这样它就出现在一个垂直的月份列表中。如果我删除内部 div 复选框并没有在所有三行中对齐。

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 回答