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 の前に 1 つの 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 に答える