如何在不使用像素的情況下使這些標簽具有相同的尺寸？

Question

這就是我所擁有的。 我正在使用引導程序。 我希望標簽尺寸相同。 我不想使用固定寬度（像素），因為我會將其翻譯成多種語言。

另一個復雜之處是，使用jQuery .html()函數將該內容作為HTML文本動態添加。 最重要的是，我可以處理什么事件，這使我可以在新代碼實際具有大小時對其進行處理。 如果我能做到這一點，我可以等同於jQuery。 這似乎有點費力。 我喜歡CSS解決方案。

這就像HTML的第一弱點。 如果沒有非常繁瑣的解決方案，您將無法完成這些簡單的事情。

 <div class="col-md-5"> <div class="input-group"> <div class="input-group-addon"> <label for="ItemWidth">Width</label> </div> <input class="form-control text-box single-line" id="ItemWidth" name="ItemWidth" type="text" value="0.25" /> </div> <div class="input-group"> <div class="input-group-addon"> <label for="ItemHeight">Height</label> </div> <input class="form-control text-box single-line" id="ItemHeight" name="ItemHeight" type="text" value="34.5" /> </div> <div class="input-group"> <div class="input-group-addon"> <label for="ItemDepth">Depth</label> </div> <input class="form-control text-box single-line" id="ItemDepth" name="ItemDepth" type="text" value="24" /> </div> </div> 

這是使用引導程序正確顯示內容的JSFiddle： http : //jsfiddle.net/sbqve4gc/1/

Answer 1

您可以使用table-row和table-cell演示-http: //jsfiddle.net/sbqve4gc/6/

.col-md-5 {
    display: table;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.input-group {
    display: table-row;
}

.input-group-addon,
.form-control {
    display: table-cell;
}

Answer 2

將一個類添加到容器div中，然后根據需要設置其樣式。

像這樣：

<div class="input-group-addon YOURCALSSNAME equalize-width">...</div>

然后給它CSS：

.YOURCALSSNAME {
    width: 100px;
}