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

Question

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

参考上面的截图，我希望“包裹的文字”与复选框对齐，而不是像图像一样包裹在图像下面，如下所示：

我已经使用我当前的标记和样式设置了fiddle。我无法改变的是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 Fiddle demo

<小时/> 已编辑，因为我显然是 idiot ，并且没有意识到最简单的方法是将display: block;和margin-left: 18px;分配给{ {1}}元素，并浮动label元素：

.placeholder

JS Fiddle demo

浮动图像会阻止img.placeholder{ width:16px; height:16px; background-color:lightblue; float: left; } label { display: block; margin-left: 18px; } 从新行开始，label上的左边距是图像的宽度，而小的2px'gutter'可以在视觉上分隔图像和复选框（很明显地调整到味道）。

Answer 2

这是我的建议：

将img，input和span设为块元素float: left;

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

Answer 3

使用display:inline-block指定标签并给它一个宽度似乎可以解决问题。虽然理想情况下我不必指定标签宽度。

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

Answer 4

如果您约束width的{​​{1}}并浮动label和img.placeholder，它应该按您的要求运作：

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

label