Question

这就是我所拥有的。我正在使用bootstrap。我希望标签大小相同。我不想使用固定宽度（像素），因为我将把它翻译成多种语言。

另一个复杂因素是使用jQuery .html()函数将此内容动态添加为HTML文本。最重要的是，我可以处理什么事件，这将允许我在实际有一个大小时处理我的新代码。如果我能做到这一点，我可以与jQuery相提并论。这看起来有点沉重。我想要一个CSS解决方案。

这感觉就像是HTML的头号弱点。如果没有非常重的解决方案，你就无法做到这些简单的事情。

＆＃13;

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

＆＃13;

这是使用bootstrap正确显示事物的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;
}

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

2 个答案: