Question

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

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仅具有此宽度。

但我们需要获得内容的最大宽度（最大值）。所以为此，我在内部div之前添加了一个div并设置“display：inline-block”来获取内容的宽度（max）。

我修改了你的代码，它现在正在运行。

<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/

在悬停下拉列表中突出显示项目，并确保突出显示的颜色延伸到下拉框的右边缘

1 个答案: