親または子のCSSの幅を調整する

Question

私はselectを使ったコードを持っていましたが、それ以外のものはCSSの幅（スタイルやクラス）を使うかもしれません。だから私は持っていた：

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

最初の選択肢は、より長いオプションに合わせてデフォルトの幅を使用していた。ここまでは順調ですね。しかし、今（Webコンポーネントフレームワークと）実際のケースでは、これらの選択は、次のようにスパン内部で生成されます。

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

しかし、これは別のレイアウトになります。 2番目のケースでは、selectはそのサイズを親の幅に調整しません。

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

それが第二ケースが、（スパンの幅なし）最初のケースのために働くことはもはやデフォルトサイズを持っていません。

は私が生成するコンポーネントを変更した場合。

選択範囲に適用された（または適用されなかった）幅に適用される幅が有効になるように、選択範囲を調整するにはどうすればよいですか？

Answer 1

あなたが後になっているかどうかはわかりませんが、下の例では、幅が適用されていない場合は最も長いオプションの幅をとり、幅が適用される場合は幅の幅をとります

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

<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>