證明與輸入框

Question

我有一系列的內聯元素（與輸入文本框）應符合一個行內聯元素。見下圖。

的輸入框可以變化（通過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

你可以做到這一點使用Flexbox的的justify-content和分配的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>

如果你想支持不支持Flexbox的你選擇的選項將是包裹在自己各自的div每個標籤和輸入舊版瀏覽器，給出了封裝的父這些div顯示table並給輸入div顯示table-cell，寬度百分比爲33.3％（1/3s）。

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