CSSでチェックボックスのフォーム要素をラップする方法はありますか？

Question

私はいくつかのチェックボックスを持つフォームを提示するいくつかのコードに取り組んでいます。私は2番目（と3番目と4番目）の行に折り返すチェックボックスを取得したいが、そうすることに問題がある。現時点では、チェックボックスは折り返さずに行のページからまっすぐに実行されます。

は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

まあ、私はそれを理解しました。と（私はブロック要素が完全に最後の行の前に表示されることを可能に柔軟であることができるように一定の高さを除去

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

：これに

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

：私はこのCSSコードを変更しました送信ボタン、この質問のコメントを参照）。すごい！