css - 悬停时突出显示下拉列表中的元素，并确保突出显示的颜色延伸到下拉框的右边缘

Question

正在使用 Jquery 自动完成。将鼠标悬停在下拉列表中的元素上时，该元素会以不同的背景颜色突出显示。但是，如果下拉菜单有一个水平滚动条，则在滚动时突出显示的免费背景不会延伸到框的右边缘。如何确保突出显示的背景会一直延伸到列表中每个元素的自动完成文本框的边缘？

html 示例结构

<div id="AutocompleteContainter_div" style="position: absolute; z-index: 9999; top: 86px; left: 1135px;">
<div class="autocomplete-w1 ">
<div class="autocomplete" id="Autocomplete_div" style="max-height: 1200px; width: 245px; display: block;">
<div title="City of Origin,Power Play Goals,Salary" class=""><strong>City</strong> of Origin,Power Play Goals,Salary</div>
<div title="City of Origin,Standing in Conference,Salary" class="selected"><strong>City</strong> of Origin,Standing in Conference,Salary</div>
<div title="City of Origin,Team,Penalty Minutes Served,Salary" class=""><strong>City</strong> of Origin,Team,Penalty Minutes Served,Salary</div>
<div title="City of Origin,Standing in Division,Shots on Net,Salary" class=""><strong>City</strong> of Origin,Standing in Division,Shots on Net,Salary</div>
<div title="City of Origin,Position,Penalty Minutes Served,Salary" class=""><strong>City</strong> of Origin,Position,Penalty Minutes Served,Salary</div>
<hr class="line"><font color="#B9B9B9" size="1">&nbsp;<b>Columns</b></font><div title="CITY" class=""><strong>CITY</strong></div>
<div title="City of Origin"><strong>City</strong> of Origin</div>
</div>
</div>
</div>

CSS

.autocomplete-w1 {

background:no-repeat bottom right;
position:absolute; 
top:0px; 
left:0px; 
margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
font-size:11px;color: #333; 
}
.autocomplete { 
border:1px solid #999; 
background:#FFF; 
cursor:default; 
text-align:left;
 max-height:350px;
 overflow:auto;
 margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
        font-size:11px;color: #333;

 }
.autocomplete .selected {

background:#B8B8B8; 

}
.autocomplete div { 
padding:2px 5px; 
white-space:nowrap; 
}
.autocomplete strong { font-weight: bold;
    color: #000;
    background-color: #fff6e1; }

.autocomplete .line {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #6D7B8D;
height: 2px;
margin: 4px 0px;
text-align: center;
padding: 0px;
line-height: 2px;
}

Answer 1

我明白你的问题。在这种情况下，当您将宽度 245 设置为 div“自动完成”时，子 div 只有这个宽度。

但是我们需要获取内容的全宽(max)。因此，为此，我在内部 div 之前添加了一个 div 并设置“display:inline-block”以获得内容的宽度(最大)。

我已经修改了您的代码，现在可以使用了。

<div id="AutocompleteContainter_div" style="position: absolute; z-index: 9999; top:     0px; left: 35px;">
<div class="autocomplete-w1 ">
<div class="autocomplete" id="Autocomplete_div" style="max-height: 1200px; width: 145px; display: block;">
<div style="display:inline-block;">
<div title="City of Origin,Power Play Goals,Salary" class=""><strong>City</strong> of Origin,Power Play Goals,Salary</div>
<div title="City of Origin,Standing in Conference,Salary" class="selected"> <strong>City</strong> of Origin,Standing in Conference,Salary</div>
<div title="City of Origin,Team,Penalty Minutes Served,Salary" class=""><strong>City</strong> of Origin,Team,Penalty Minutes Served,Salary</div>
<div title="City of Origin,Standing in Division,Shots on Net,Salary" class=""><strong>City</strong> of Origin,Standing in Division,Shots on Net,Salary</div>
<div title="City of Origin,Position,Penalty Minutes Served,Salary" class="">   <strong>City</strong> of Origin,Position,Penalty Minutes Served,Salary</div>
<hr class="line"><font color="#B9B9B9" size="1">&nbsp;<b>Columns</b></font><div title="CITY" class=""><strong>CITY</strong></div>
<div title="City of Origin"><strong>City</strong> of Origin</div>
</div>
</div>
</div>
</div>

您可以在这里查看:http://jsfiddle.net/pitchaip/6uqTJ/3/