0

正在使用 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;
}
4

1 回答 1

1

我理解你的问题。在这种情况下，当您将宽度 245 设置为 div“自动完成”时，子 div 仅具有此宽度。

但是我们需要获取内容的全宽（最大）。所以为此，我在内部 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/

于 2013-01-11T17:52:23.980 回答