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/

Answer 2

好吧，我明白了。我改变了这个CSS代码：

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

对此：

.add-to-cart .form-checkboxes{
    max-width: 600px;
    display: inline-block;
}

我删除了固定高度以允许块灵活，允许元素在最后一行之前完全显示（使用提交按钮，请参阅此问题的注释）。呼！

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

2 个答案: