メイクリストはJavaScriptを

Question

なしのinputタグの幅は、HTMLの次のスニペットを考えてみましょう。 （リストには実際のアイテムがありますが、コンパクトにするためにここに残しておきます）。ここでは、CSSを使用してリストの幅を制御することができ、同様に入力タグに対してもリストの幅を制御できます。

入力タグをデフォルトの幅のままにして、リスト幅の幅を一致させたいとします。私はもちろん、JavaScriptのgetComputedStyleを使用することができます。理論的には、これはユーザーがJavaScriptを無効にすると問題を引き起こしますが、実際には、私は実際に（非常に最小限の）オートコンプリートウィジェット（ウィキペディアのようですが、ファンシーは少ない）をコーディングしているので、JavaScriptなしでは機能しません。

これでも可能ですか？私はCSSについては基本的に何も知らないので、これが明白であると思われるなら私を許してください。

Answer 1

通常、あなたは一緒にdisplay:tableかdisplay:table-cell（匿名のオブジェクトが他の1のために作成される、重要ではありません）に設定するラッパー要素でこれを行うだろう指定された幅は非常に小さい。ラッパーの使用される幅は、少なくとも入力ボックスの幅と同じになるように強制され、リストはその中に収まります。

（デモCSSとHTMLマークアップは、ジョセフMarikleの答えから借用）

.wrapper { 
 
    display: table; 
 
    width:1px; 
 
} 
 

 
/* for demo only */ 
 
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div>

Answer 2

を使用すると、新しいCSS標準を使用する、あまりにも嫌いじゃないならば、私はフレキシボックスを使用してお勧めしたいのマッチング幅

Answer 3

に//変更40ピクセル

<ul style = "width: 40px">を試してみてください。明示的な値を設定したり計算したりすることなく、両方の要素が同じ幅であることを確認する両方の方法に適応します。

.wrapper { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
} 
 

 
/* for demo only */ 
 
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div>