如何在不使用像素的情况下使这些标签大小相同

How can I make these labels the same size without using pixels?

本文关键字：标签 像素 情况下      更新时间：2023-09-26

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

另一个复杂的问题是，使用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/

您可以使用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;
}

将一个类添加到容器div中，并根据需要对其进行样式设置。

像这样：

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

然后给它CSS:

.YOURCALSSNAME {
    width: 100px;
}
相关文章：