如何根据内容的宽度改变下拉菜单的宽度?我有一个下拉菜单,显示两个下拉菜单,一个有小字,所以它有固定的宽度,而另一个下拉菜单有较长的字,所以它将我的内容推到下一行。
宽度如何自动成为 div 内任何内容的大小?
最佳答案
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>
预览:
关于CSS 下拉菜单大小根据内容动态变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3781720/