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/

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 코드 변경 제출 버튼,이 질문에 대한 의견보기). 아휴!