インライン要素を入力ボックスに合わせる

Question

1行に収まる一連のインライン要素（入力テキストボックスを使用）があります。下の図を参照してください。

入力ボックスの数は、入力ボックスのラベルと同じように（AJAX経由で動的に読み込むことができます）。以下の例では、長さx幅x高さです。

インライン要素が含まれるdivは、この行の上下の内容に依存する動的な幅です。

以下のスクリーンショットが発生した場合、どのように入力ボックスの幅を均等に拡大して、コンテンツの両端が正当なものになるようにすることができますか？純粋なCSSソリューションはありますか？

.dynamicWidth { 
 
    background-color: green; 
 
    height: 400px; 
 
    position: absolute; 
 
}

<div class="dynamicWidth"> 
 
    <div> 
 
    <select> 
 
     <option>This could be longer or shorter dependending on what is dynamically loaded</option> 
 
    </select> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <span>Length</span> 
 
    <input type="text" placeholder="length"><span> x Width</span> 
 
    <input type="text" placeholder="width"><span> x Height</span> 
 
    <input type="text" placeholder="height"> 
 
    </div> 
 
</div>

Answer 1

あなたはフレキシボックスのjustify-contentと入力要素を含むdiv要素にspace-aroundの値を代入を使用してこれを実現することができます。

.dynamicWidth { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 400px; 
 
    position: absolute; 
 
} 
 

 
.dynamicWidth div:nth-of-type(2) { 
 
    display: flex; 
 
    justify-content: space-around; 
 
}

<div class="dynamicWidth"> 
 
    <div> 
 
    <select> 
 
     <option>This could be longer or shorter dependending on what is dynamically loaded</option> 
 
    </select> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <span>Length</span> 
 
    <input type="text" placeholder="length"><span> x Width</span> 
 
    <input type="text" placeholder="width"><span> x Height</span> 
 
    <input type="text" placeholder="height"> 
 
    </div> 
 
</div>

あなたの代わりのオプションはそれぞれ独自のdiv内の各ラベルと入力をラップすることですフレキシボックスをサポートしていないレガシーブラウザをサポートしようとしている場合は、それを囲む親を与えますそれらはtableの表示を分割し、入力のdivには、33.3％（1/3s）の幅割合を有するtable-cellの表示を与える。

.dynamicWidth { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 400px; 
 
    position: absolute; 
 
} 
 

 
.dynamicWidth div:nth-of-type(2) { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.input-container { 
 
    width: 33.3%; 
 
    display: table-cell; 
 
}

<div class="dynamicWidth"> 
 
    <div> 
 
    <select> 
 
     <option>This could be longer or shorter dependending on what is dynamically loaded</option> 
 
    </select> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <div class="input-container"> 
 
     <span>Length</span> 
 
     <input type="text" placeholder="length"> 
 
    </div> 
 
    
 
    <div class="input-container"> 
 
     <span> x Width</span> 
 
     <input type="text" placeholder="width"> 
 
    </div> 
 
    
 
    <div class="input-container"> 
 
     <span> x Height</span> 
 
     <input type="text" placeholder="height"> 
 
    </div> 
 
    </div> 
 
</div>