需要 html 复选框标签来“很好地”包裹

Question

我有一个复选框网格，其中每个单元格都有固定的宽度，每个复选框前面都有一个小图像。如果标签文本太长，我很难让文本换行在复选框下方。

参考上面的屏幕截图，我希望“换行的文本”与复选框对齐，而不是包裹在图像下方，如下所示：

我已经设置了 摆弄我当前的标记和样式。我无法更改的是 HTML 结构，但任何 CSS 更改都可以。

这是一个代码片段：

.checkbox-list {
}
img.placeholder{
    width:16px;
    height:16px;
    background-color:lightblue;
}
td {
    padding:2px;
    width:150px;
    vertical-align:top;
}
label {
    /*display:inline-block;*/
}

<table class="checkbox-list">
    <tbody><tr>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Some really long text that wraps</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
    </tr><tr>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
        <td>
            <img class="placeholder"/>
            <label>
                <input type="checkbox"/>
                <span>Foo</span></label></td>
    </tr>
</tbody></table>

Answer 1

您只需将 margin-bottom 应用于图像和 float: left：

img.placeholder{
    width:16px;
    height:16px;
    background-color:lightblue;
    margin-bottom: 1em;
    float: left;
}

JS小提琴演示。

---

Edited because I am, apparently, an idiot, and didn't realise the simplest approach was to assign the display: block; and margin-left: 18px; to the label element, and float the .placeholder elements:

img.placeholder{
    width:16px;
    height:16px;
    background-color:lightblue;
    float: left;
}

label {
    display: block;
    margin-left: 18px;
}

JS Fiddle 演示。

浮动图像可防止 label 从换行符开始，label 上的 margin-left 是图像的宽度，并且有一个 2px 的小“装订线”，以提高视觉效果将图像和复选框分开（显然要根据口味进行调整）。

Answer 2

我的建议是：

将 img、input 和 span 制作为块元素和 float: left；

http://jsfiddle.net/9s8Db/4/

Answer 3

使用 display:inline-block 指定标签并为其指定宽度似乎可以解决问题。尽管理想情况下我不必指定标签宽度。

http://jsfiddle.net/9s8Db/7/

Answer 4

如果您限制 label 的 width 以及浮动 img.placeholder 和 label，它应该按照您的要求工作：

http://jsfiddle.net/9s8Db/8/

img.placeholder{
    width:16px;
    height:16px;
    background-color:lightblue;
    float: left;
}
td {
    padding:2px;
    width:150px;
    vertical-align:top;
}
label {
    /*display:inline-block;*/
    float: left;
    width: 100px;
}