Question

我有一个使用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>

它适用于第二种情况，但第一种情况（在范围内没有宽度）它将不再具有默认大小。

如何调整选择以使它的效果类似于应用（或不应用）跨度的宽度是否已直接应用于选择？

Answer 1

好的，不确定这是否是您所追求的，但是如果没有宽度应用于跨度，则下面将采用最长选项的宽度，或者如果应用宽度，将采用跨度的宽度< / p>

＆＃13;

.span {
  display: inline-block;
}
.select {
  width: 100%;
  max-width: 100%;
}

＆＃13;

<strong>No width span</strong><br>
<span class="span">
  <select class="select">
    <option>a long option</option>
  </select>
</span><br><br>

<strong>Span with width</strong><br>
<span class="span" style="width:200px;">
  <select class="select">
    <option>a long option</option>
  </select>
</span>

＆＃13;

调整父或子的CSS宽度

1 个答案: