通过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。 (example)

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

值得注意的是IE7 doesn't support display:table。

---

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

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;
}