如何在CSS中包裝複選框表單元素？

我正在處理一些代碼，它提供了一些複選框的表單。我想讓複選框包裝到第二個（和第三個和第四個）行，但是在這樣做時遇到問題。目前，複選框在一行中直接離開頁面而沒有包裝。如何在CSS中包裝複選框表單元素？

有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>

來源

2017-01-30 Fang27

*包裝到第二條（和第三條和第四條）線*此行非常混亂，請進一步解釋您的帖子 – Roljhon

目前，複選框在網頁上單行運行，並完全離開容器。我希望他們包裝在容器內，以便他們創建多行而不是一長排....這有幫助嗎？ – Fang27

試試這個

.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/

來源

2017-01-30 17:20:52 grinmax

沒有骰子 - 它使複選框的行浮出窗體，以便該行下方的提交按鈕位於複選框下方。 – Fang27

按鈕在哪裏？ – grinmax

提交按鈕位於下一行，但確實與問題無關，所以我將代碼留給了該問題。 – Fang27

嗯，我想通了。我改變此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; 
}

我除去固定的高度，以允許該塊是在使元件到最後一行之前完全顯示柔性的（與提交按鈕，看到對這個問題的評論）。呼！

來源

2017-01-30 21:54:07 Fang27

如何在CSS中包裝複選框表單元素？

回答

相關問題