包含继承具有绝对位置的内部列表宽度的div

Question

我正试图找到一种方法，将包含的div调整为具有绝对位置的列表的宽度。这可能吗？我正在尝试使用纯css。

<div class="list">
    <span id="nav">menu</span>
    <ol class="select">
        <li data-value="en">some text here</li>
       <li data-value="de">some text here</li>
    </ol>
</div>
<div>
text here
</div>

我基本上希望它像表单中的选择列表一样预成型，其中包含的div调整为OL的宽度，并在出现下拉时覆盖下面的文本。代码在这里http://jsfiddle.net/rBXRT/168/

Answer 1

我认为这不适用于CSS，但使用jQuery，您可以简单地添加以下行：

$(".list").css({width: $(".select").outerWidth()});

Fiddle：http://jsfiddle.net/rBXRT/169/

Answer 2

jsFiddle Demo

绝对定位的元素将从页面流中删除，并且将相对于具有位置的下一个包含元素。由于没有为您标记这样的内容，因此这就是文档正文。

用position:relative标记div.list将导致该元素成为具有位置的父元素，从而迫使子元素包含在该宽度内。

.list{
 background:red;
 display:inline-block;
 position:relative;
}