html - 如何在 CSS 中包装复选框表单元素？

Question

我正在编写一些代码来呈现一个带有多个复选框的表单。我想让复选框换行到第二行(第三行和第四行)，但是这样做有问题。目前，复选框直接从页面排成一行，没有换行。

有 10 个(或更多)复选框，但为了简洁起见，我只列出了其中的几个，因为列出所有复选框并不会真正增加对话:

我的 CSS:

.add-to-cart .attribute label {
    display: inline;
    padding-right: 35px;
}
.add-to-cart .form-checkboxes{
    max-width: 600px;
    height: 300px;
    display: inline-flex;
}

.add-to-cart .attribute .form-item .form-type-checkbox {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 90px;
    background-color: #ddd;
    padding: 20px;
    margin: 10px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font: bold 10px verdana, arial, 'Raleway', sans-serif;
    font-style: italic;
}

我的 HTML/代码:

<div class="content">
<div class="add-to-cart">
    <form class="ajax-cart-submit-form" action="/this-product" method="post" id="uc-product-add-to-cart-form-7" accept-charset="UTF-8">
    <div class="attribute attribute-7 even">
        <div class="form-item form-type-checkboxes form-item-attributes-7">
            <label for="edit-attributes-7">Extras </label>
            <div id="edit-attributes-7" class="form-checkboxes">
                <div class="form-item form-type-checkbox form-item-attributes-7-49">
                    <input type="checkbox" id="edit-attributes-7-49" name="attributes[7][49]" value="49" class="form-checkbox" />
                    <label class="option" for="edit-attributes-7-49"> Blue </label>
                </div>
                <div class="form-item form-type-checkbox form-item-attributes-7-43">
                    <input type="checkbox" id="edit-attributes-7-43" name="attributes[7][43]" value="43" class="form-checkbox" />
                    <label class="option" for="edit-attributes-7-43"> Red </label>
                </div>
                <div class="form-item form-type-checkbox form-item-attributes-7-50">
                    <input type="checkbox" id="edit-attributes-7-50" name="attributes[7][50]" value="50" class="form-checkbox" />
                    <label class="option" for="edit-attributes-7-50"> Green </label>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

试试这个

.add-to-cart .attribute label {
    display: inline;
    padding-right: 35px;
}
.add-to-cart .form-checkboxes{
    max-width: 600px;
    height: 300px;
    display: inline-flex;
}

.add-to-cart .attribute .form-checkboxes:not(.form-item) {
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 90px;
    background-color: #ddd;
    padding: 20px;
    margin: 10px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font: bold 10px verdana, arial, 'Raleway', sans-serif;
    font-style: italic;
}

现场演示 - https://jsfiddle.net/91r7v20q/