Question

我希望悬停背景从div的边框一直延伸到div的边框，而不只是包装单词

<div id="selection">    
       <label class="category_label"><input type="checkbox">abc</label><br>
       <label class="category_label"><input type="checkbox">d</label>
</div>

CSS：

#selection{
    padding:0.5em;
    width:200px;
    height:150px;
    overflow-y:auto;
    position:absolute;
    border:1px solid #000;
    background: white;
}
label.category_label{
    cursor:pointer;
    width:100px;
}
label.category_label:hover{
    background:#ccc;
}

http://jsfiddle.net/2H2tr/1/

Answer 1

您可以做的一件事是将标签样式设置为

display:block;

删除“br”标签，然后在悬停时将标签设置为

width:100%;

就是这样:-) 更新小提琴：http://jsfiddle.net/2H2tr/2/

Answer 2

试试这个

label.category_label{
cursor:pointer;
width:100%;
float:left;
 }

http://jsfiddle.net/2H2tr/4/

Answer 3

你去了：

http://jsfiddle.net/vahidseo/2H2tr/3/

删除该br标签。

改变这个：

label.category_label{
    cursor:pointer;
    width:100%;
    display: block;
}

Answer 4

将div中的每个标签元素（设计包含display: block;）包裹起来并赋予悬停规则：

div.wrapper:hover {
    background: #ccc
}

Fiddle

标签悬停宽度为div的全宽

4 个答案: