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

Question

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

参考上面的截图，我希望“换行的文本”与复选框对齐，而不是像这样换行：

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

这是一个代码sn-p：

.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 Fiddle demo.

---

已编辑，因为我显然是一个白痴，并且没有意识到最简单的方法是将display: block; 和margin-left: 18px; 分配给label 元素，并浮动.placeholder 元素：

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

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

JS Fiddle demo.

浮动图像可防止label 从换行开始，label 上的左边距是图像的宽度和一个 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;
}