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

【问题标题】：Indenting the Second line of Label to be exactly below the first line through CSS通过 CSS 将 Label 的第二行缩进到第一行的正下方
【发布时间】：2014-03-20 20:36:41
【问题描述】：

我希望缩进标签的第二行，这样它就不会落后于第一行的起点。

这是我的 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>

看起来是这样的

我可以对其进行调整以使转换不会落后于成本吗？

谢谢

【问题讨论】：

标签： html css text-indent

【解决方案1】：

一种选择是将input 元素浮动到左侧，然后将span 元素的显示更改为table。 (example)

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

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

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

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

【讨论】：

非常感谢！ :)
我认为您不必将其更改为display:table，对吗？你不能把它们都浮起来，然后把span改成div吗？类似于您的 alternative 方法，但我认为没有理由在那时将其设为跨度：P
@nzifnab 是的，类似的东西会起作用，但是你需要在input 元素上设置一个高度。(example) .. 当然，这可行，但我假设数量的文本将是可变的。 display:table 方法应该适用于不同字符/长度的动态内容

【解决方案2】：

还有一种方法：

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

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

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

【讨论】：