絕對定位div的寬度與兒童寬度不一樣

Question

我使用Dropkick jquery插件來定製選擇框。

看起來絕對定位下拉總是從父級獲取其寬度，而不是子列表項的全部寬度。

我該如何解決這個問題？

看到這個jsfiddle。

結構：

<label class="filter-lbl"> 
    <div class="dk_container dk_theme_default" style="display: block;"> 
     <a class="dk_toggle"> 
      <span class="dk_label"> 
       <nobr>status</nobr> 
      </span> 
     </a> 
     <div class="dk_options"> 
      <ul class="dk_options_inner"> 
       <li class="dk_option_current"> 
        <a>state</a> 
       </li> 
       <li class=""> 
        <a>longerwords</a> 
       </li> 
       <li class=""> 
        <a>longerwords</a> 
       </li> 
       <li class=""> 
        <a>longerwords</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</label> 

UPDATE：

這似乎是 float我 .filter-lbl，是導致此。

這是因爲我的.filter-lbl的內聯樣式。

有沒有解決這個問題的方法？

Answer 1

你的DK選項類不需要是絕對的，除非你正在尋找溢出，絕對會忽略其他任何東西。

在你的CSS

.dk_options { 
    /*display: none;*/ 
    margin-top: -1px; 
    position: relative; 
    right: 0; 
    width:auto; 
} 

試試這個，這將確保包裝是正確的寬度。