如何使这些标签相同的大小，而不使用像素？ [英] How can I make these labels the same size without using pixels?

问题描述

这是我的。我使用bootstrap。我想要的标签是相同的大小。我不想使用固定宽度（像素），因为我要将它翻译成多种语言。

This is what I have. I am using bootstrap. I want the labels to be the same size. I don't want to use a fixed width (pixels) because I'm going to be translating this into multiple languages.

另一个复杂性是，这个内容被添加动态地作为HTML文本使用jQuery .html（）函数。最重要的是，我可以处理的事件将允许我工作在我的新代码，当它实际上有一个大小。如果我能做到这一点，我可以用jQuery平衡。这似乎有点重。我会喜欢一个CSS解决方案。

An other complication is that this content is added dynamically as HTML text using the jQuery .html() function. Most importantly, what event can I handle that would allow me to work on my new code when it actually has a size. If i can do that, I can equalize with jQuery. This seems a bit heavy handed. I would love a CSS solution.

这只是觉得像HTML的第一个弱点。

This just feels like the number one weakness with HTML. You cannot do simple these simple things without very heavy solutions.

<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使用bootstrap正确显示事件：
http://jsfiddle.net/sbqve4gc/1/

Here is the JSFiddle that shows things correctly with bootstrap: http://jsfiddle.net/sbqve4gc/1/

推荐答案

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

You can use table-row and table-cell demo - 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;
}

这篇关于如何使这些标签相同的大小，而不使用像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！