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>

预览: