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

小提琴：http://jsfiddle.net/MxdQS/

我希望只在可能的情况下使用CSS，所以请不要使用javascript解决方案：）

这是一个更好地展示我所说的内容的图表： enter image description here

一些澄清：如果我有2个不同宽度的容器，1个绝对定位，我怎样才能将它们匹配在一起，这样较短的容器将始终扩展到较长容器的宽度？

有人可以就如何做到这一点提出建议吗？

Answer 1

检查 DEMO HERE

<强> 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;
}

<强>更新

检查更新 DEMO

使父容器伸展到宽度绝对定位的子，反之亦然

1 个答案: