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

的 children 元素重置行为

复选框标签包装

2 个答案: