如何在不使用像素的情况下使这些标签具有相同的尺寸？

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