Html 调整父级或子级的CSS宽度

我有一个使用select（但可能是其他任何东西）的代码，而那个（和其他人）select可能使用也可能不使用css宽度（样式或类）。所以我有：

<select>...</select>
...
<select style="width: 100px">...</select>

。。。
...
...

第一个选择是使用默认宽度来适应更长的选项。到目前为止，一切顺利。但现在在实际情况中（使用web组件框架），这些选择是在如下范围内生成的：

<span><select>...</select></span>
...
<span style="width: 100px"><select>...</select></span>

。。。
...
...

但这会导致不同的布局。在第二种情况下，select不会将其大小调整为父宽度

如果我更改组件以生成：

<span style="width: 100px"><select style="width: 100%">...</select></span>

。。。

它适用于第二种情况，但第一种情况（跨度中没有宽度）将不再具有默认大小

---

我如何调整选择，使其工作方式与应用于跨度的宽度（或未应用于跨度）直接应用于（或未应用于）选择一样？

好的，不确定这是否是您想要的，但如果未应用于跨度，则下面的选项将采用最长选项的宽度，如果应用了宽度，则采用跨度的宽度

.span{
显示：内联块；
}
.选择{
宽度：100%；
最大宽度：100%；
}

无宽度范围

长期选择



宽度跨度

长期选择

span是一个内联元素，因此它不会侦听宽度，请将其更改为内联块或块。。如果您希望选择的宽度为父宽度-使其宽度为100%，我可以使用内联块，但无论如何，只有在1）跨度没有宽度，选择没有宽度时，布局才正确；2） 跨度有一个宽度，选择宽度为100%。但是我想要一个纯CSS的单一解决方案来处理这两种情况（有宽度的跨度或没有宽度的跨度）。