需要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

您只需将a margin-bottom应用于图像即可float: left:

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

JS小提琴演示.

编辑因为我,显然,一个白痴,并没有意识到最简单的方法是分配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小提琴演示.

浮动图像可以防止在label新行上开始,左边的边距label是图像的宽度,还有一个小的2px"阴沟",可以在视觉上分离图像和复选框(显然可以调整味道).