使父容器拉伸以适应绝对定位的子元素的宽度，反之亦然

Question

我正在处理一个下拉菜单的标记。

标记如下：

<div class="select">
    <a href="#" class="anchor menu-active">
        <label>val1</label><span class="arrow"><label></label></span>
    </a>

    <div class="container menu-visible">
        <ul>
            <li>
                <a value="val1" class="item-selected">val1</a>
            </li>
            <li>
                <a value="val2333333333">val2333333333</a>
            </li>
        </ul>
    </div>
</div>

第一个a代表菜单项，container div代表子菜单列表。

• 子菜单项的宽度是可变的，因为它们是动态生成的。
• 锚点中的文本加粗，因此在某些情况下，锚点的宽度可能比子菜单列表大。

需要做什么： container和anchor的宽度必须相同。子菜单可以比锚点更宽或反之亦然。此外，宽度不应被人为地限制，应允许根据更宽的内容（无论是anchor还是container）扩展宽度。

以下是我一直在尝试的CSS，但似乎无法使anchor完全扩展以适应container：

.container{
    position: absolute;
}

.anchor{
    font-weight: bold;
}

li{
    background: blue;
}

ul{
    display: inline-block;
}

.select{
    background: red;
    display: inline-block;
}

以下是需要翻译的内容：

还有一个 jsfiddle 示例：http://jsfiddle.net/MxdQS/

我希望在可能的情况下只使用 CSS 来实现，所以请不要提供 JavaScript 解决方案 :)

下面是一张图，更好地说明了我的问题：

一些澄清： 如果我有两个不同宽度的容器，并且其中一个被绝对定位，如何使它们匹配在一起，使较短的容器始终扩展到较长容器的宽度？

能否有人指导一下如何做到这一点？

- F21

Answer 1

请在此处检查演示

CSS

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}

更新

请查看更新的演示

- Kamal

---

很遗憾，宽度无法人为限制。例如，如果您将列表项中的一个更改为非常长，它将延伸出容器。 - F21

你想要的是，如果你的文本超过了宽度，它会换行到li中，而不是重叠在上面吗？请告诉我。 - Kamal

文本不应该换行，它应该一直延伸下去。 - F21

不应该换行。例如，如果li中的文本是1111111111111111111111111111111111111111111111111111，则不应该换行，而应该只显示在一行上。此外，我不能有任何固定宽度。整个内容应根据内部内容调整大小。 - F21

那么，您如何保持这两个容器的相同宽度呢？在您的问题中提到您希望这两个容器具有相同的宽度。 - Kamal

是的，这就是我问这个问题的原因 :) 如果我有两个不同宽度的容器，如何将它们匹配在一起，使较短的容器始终扩展到较长容器的宽度？ - F21