CSS下拉菜单大小根据内容动态变化？

Question

如何根据内容的宽度制作下拉菜单的宽度变化？我有一个下拉菜单显示两个下拉菜单，一个有小字，所以它有一个设置的宽度，而另一个下拉菜单有更长的字，所以它将我的内容推到下一行。

宽度如何自动变成div内部的大小？

Answer 1

<强> CSS：

.relativeWrap { width:30%; position:relative; }
.stickyWrap { position:relative; left:0; right:0; }
.dropDown { width:100%; }

<强> HTML：

<div class="relativeWrap">
    <div class="stickyWrap">
        <select class="dropDown">
            <option>Lorep ipsum</option>
            <option>Lorep ipsum</option>
            <option>Lorep ipsum</option>
        </select>
    </div>
    <div>Content</div>
</div>

<强>更新

<强> CSS：

.relativeWrap { width:30%; position:relative; }
.stickyWrap { position:relative; left:0; right:0; }
.dropDown { width:100%; background:yellow; border:1px solid black; }

<强> HTML：

<div class="relativeWrap">
    <div class="stickyWrap">
        <ul class="dropDown">
            <li>
                Lorep ipsum
                <ul>
                    <li>Ipsum lorem</li>
                    <li>Ipsum lorem</li>
                    <li>Ipsum lorem</li>
                </ul>
            </li>
            <li>Lorep ipsum</li>
            <li>Lorep ipsum</li>
        </ul>
    </div>
    <div>Content</div>
</div>

预览

Answer 2

使用纯CSS无法做到这一点。像jquery这样的Javascript库通常用于操纵CSS属性来实现这一目标。