我有一个国家列表,显示为相对元素中的绝对元素。
HTML是:
<div class="screener-filter">
<div class="screener-filter-dropdown">
<div class="dropdown-item">Afghanistan</div>
<div class="dropdown-item">Albania</div>
...
</div>
</div>
CSS为:
.screener-filter {
position: relative;
display: inline-block;
}
.screener-filter-dropdown {
position: absolute;
left: 0;
top: 110%;
}
问题是.screener-filter-dropdown
自动适合父级的宽度,因此某些国家/地区的名称不能排成一行。以美属萨摩亚为例:
我的问题是,如何允许.screener-filter-dropdown
具有基于国名的宽度的自动宽度,而不受父级宽度的限制?
答案 0 :(得分:0)
您是否尝试过添加到screener-filter-dropdown
类width:fit-content
或width:max-content
上?
答案 1 :(得分:0)
尝试
.screener-filter {
position: relative;
display: inline-block;
width: 100%; // <=
}