Question

我的html中有以下代码：

<li>
    <p>
        <input type="checkbox" id="is_selected"/>
        <img src="http://site.com/images/user44.png" alt=""/>
        <label for="is_selected">Bob Smith</label>
    </p>
</li>

当我渲染它时，会发生的事情是标签'Bob Smith'的右侧有很多空白区域。用户必须直接点击“Bob Smith”才能切换复选框，如果他在空白处右键单击，则不会发生任何事情。

我该怎么做才能让'Bob Smith'标签延伸到右边的整个空间？

我在标签上尝试了width: 100%，但它没有任何效果。

Answer 1

label {
    display: block;
}

除非另有说明，否则宽度为100％。

编辑：

使用css将标签设为block级元素会导致我认为会出现一些验证错误，因为block级别元素不应放在<p />标记中。如果您实现此标记，请考虑<p />标记的替代方法，<div />在这里可以做得很好。

Answer 2

使用overflow: hidden以及浮动控件。

http://jsfiddle.net/Eric/br84k/

label {
    display: block;
    overflow: hidden;
    line-height: 20px;
}

input, img {
    float: left;
    display: block;
    height: 20px;
}

Answer 3

将label display:inline-block;设为width，然后设置{{1}}以填充剩余的空间。

http://jsfiddle.net/jasongennaro/qWSas/

如何使<label>拉伸其容器的整个长度<p>？</p> </label>

3 个答案: