Оболочка флажков флаконов

Question

Я не могу понять, как остановить этикетки от упаковки здесь. Есть предположения?

   <div> 
       <h4>Risk Category</h4> 
       <ul class="checkbox-grid"> 
        <li><input type="checkbox" id="chkStrategic" value="Strategic" /><label>Strategic</label></li> 
        <li><input type="checkbox" id="chkEnvironmental" value="Environmental" /><label>Environmental</label></li> 
        <li><input type="checkbox" id="chkMarket" value="Market" /><label>Market</label></li> 
        <li><input type="checkbox" id="chkCredit" value="Credit" /><label>Credit</label></li> 
        <li><input type="checkbox" id="chkOperational" value="Operational" /><label>Operational</label></li> 
        <li><input type="checkbox" id="chkCompliance" value="Compliance" /><label>Compliance</label></li> 
        <li><input type="checkbox" id="chkBenefit" value="Benefit" /><label>Benefit</label></li> 
        <li><input type="checkbox" id="chkValue" value="Value" /><label>Value Delivery</label></li> 
        <li><input type="checkbox" id="chkProject" value="Project" /><label>Project Delivery</label></li> 
        <li><input type="checkbox" id="chkService" value="Service" /><label>Service Delivery</label></li> 
        <li><input type="checkbox" id="chkSecurity" value="Security" /><label>Security</label></li> 
       </ul> 
      </div> 

Code Pen Showing the Problem

Спасибо заранее. JD

Answer 1

Установите дисплей в строку вместо блока. Элементы уровня блока, как правило, расширяются до 100% -ной ширины родительского элемента. inline или inline-block элементы будут выровнены со своими родственными элементами.

#dialog-form label, input { 
    display: inline; 
} 

Updated Codepen

Answer 2

Просто добавьте следующие правила:

#dialog-form .checkbox-grid input, 
#dialog-form .checkbox-grid label 
{ 
    display:inline; 
} 

Причина заключается в том, что предыдущий набор правил display:block всем label и input.

Эти новые правила сброса поведение только для этого вида элементов детей из .checkbox-grid