复选框标签包装

时间:2015-10-08 19:17:57

标签: css

我似乎无法弄清楚如何阻止标签在这里包装。有什么想法吗?

                <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

2 个答案:

答案 0 :(得分:3)

将显示设置为内联而不是块。块级元素倾向于扩展到父级的100%宽度。 inlineinline-block元素将与其兄弟元素保持一致。

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

Updated Codepen

答案 1 :(得分:1)

只需添加以下规则:

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

原因是以前的规则集display:block设置为所有labelinput

这些新规则仅针对.checkbox-grid

children 元素重置行为
相关问题