html - 通过 CSS 将 Label 的第二行缩进到第一行的正下方

Question

我希望缩进标签的第二行，使其永远不会落后于第一行的起点。

这是我的 HTML：-

        <label for="ui-multiselect-edit-1" title="" class="ui-corner-all ui-state-hover">
    <input id="ui-multiselect-edit-1" name="multiselect_edit-selective" type="checkbox"   value="Cost-of something" title="">

    <span>Cost-driven / restructuring transformations</span>
</label>

这是它的样子

我可以调整它以使转换不会落后于成本吗？

谢谢

Answer 1

一种选择是将input元素浮动到左侧，然后将span元素的显示更改为table. （例子）

label > input {
    float:left;
}
label > span {
    display:table;
}

值得注意的是，IE7 不支持 display:table.

---

或者，将span元素的显示更改为block并添加一个margin-left等于复选框元素的宽度+填充的值.. （示例）

label > span {
    margin-left:28px;
    display:block;
}

Answer 2

还有一种方法：

label[for] {
    white-space: nowrap;
}

label[for] input{
    vertical-align: top;
}

label[for] span
{
    display: inline-block;
    white-space: normal;
}