设置div相对于另一个div文本的宽度，如表td

Question

检查第一张图片

我已将div设置为仅显示在图片中

html是：

<div id="div_pro_qty_condi_168">
               <label>Loyalty Cards :</label> 
               <input type="text" name="pro_qty_condi[168]" class="text_box_medium">
         </div>
         <div id="div_pro_qty_condi_1">
             <label>Premium Business Cards :</label> 
             <input type="text" name="pro_qty_condi[1]" class="text_box_medium">
         </div>
.         
.
.
.
        <div id="div_pro_qty_condi_135">
            <label>Fearless Drawstring Bag :</label> 
             <input type="text" name="pro_qty_condi[135]" class="text_box_medium">
        </div>

如何将标签设置为与其他最大div相关的最大尺寸，例如，如果我使用table div <td>自动设置div宽度作为标签文字，但我怎么能用{{1}}设置它？

Answer 1

试试这段代码：

<强> Fiddle

label{
      display:inline-block;
     width:35%;
   }

Answer 2

可能有更好的方法，但在我的头脑中，你可以这样做。

HTML：

<div>
    <div id="div_pro_qty_condi_168">
        <div>
            <label>Loyalty Cards :</label>
        </div>
        <input type="text" name="pro_qty_condi[168]" class="text_box_medium" />
    </div>
    <div id="div_pro_qty_condi_1">
        <div>
            <label>Premium Business Cards :</label>
        </div>
        <input type="text" name="pro_qty_condi[1]" class="text_box_medium" />
    </div>
    <div id="div_pro_qty_condi_135">
        <div>
            <label>Fearless Drawstring Bag :</label>
        </div>
        <input type="text" name="pro_qty_condi[135]" class="text_box_medium" />
    </div>
</div>

CSS：

div {
    display: table;
}
div div {
    display: table-row;
}
div div div {
    display: table-cell;
}

DEMO HERE

Answer 3

试试这段代码：

$(function(){
    var _nLen = $('label').length;
    var _nMax = $("label:eq(0)").width();
    for(var i=0; i<_nLen;i++) {
        var _nTemp=0;
        _nTemp = $("label:eq("+i+")").width();
        if(_nTemp>=_nMax) {
            _nMax = _nTemp;
        }
    }
    for(var i=0; i<_nLen;i++) {
        $("label:eq("+i+")").css('display','inline-block');
        $("label:eq("+i+")").css('width',(_nMax+'px'));
    }
});