绝对定位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>

更新

好像我float上的.filter-lbl造成了这种情况。

这是因为.filter-lbl的内联样式。

有解决方法吗？

Answer 1

你的dk选项类不需要绝对，除非你正在寻找溢出，绝对会忽略其他任何东西。

在CSS中试试这个

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

这应确保包装器的宽度正确。