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()});

小提琴：http://jsfiddle.net/rBXRT/169/

Answer 2

<强> jsFiddle Demo

绝对定位的元素将从页面流中移除，并且将相对于包含位置的下一个包含元素。由于没有任何标记为您，这就是文档正文。

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

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

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

2 个答案: