Jquery 当两个文本框位于不同的div时，将文本框与标签水平对齐

我试图将一系列文本框与其对应的标签对齐。因为它们位于两个不同的div中，所以我无法使用inherit关键字。我尝试使用下面的javascript/jquery代码来对齐元素对，但是

$（tb）.css（'left'）

只返回

auto

。有人知道如何使用html、css和/或javascript/jquery实现这种对齐，而不使用表吗

$(function() {
    $('#infoLabels label').each(function(idx,lbl) {
        var tb = $('#' + lbl.htmlFor);

        ($(tb).width() > $(this).width()) ? $(this).width($(tb).width()) : $(tb).width($(this).width());
        $(this).css('left',$(tb).css('left'));                
    });
});

---

提前谢谢。

我认为在这种情况下使用桌子是完全可以接受的。如果出于任何您不愿意的原因，您可以使用CSS解决方案通过设置包含

标签
和
输入
元素的
span
元素的宽度来实现所需。试试这个：


span{
显示：内联块；
右边距：10px；
}
跨度：第n个孩子（1）{
宽度：245px；
}
跨度：第n个孩子（2），
跨度：第n个孩子（3）{
宽度：45px；
}
跨距输入{
宽度：100%；
}

时间
价值
旗帜
html代码

               <div id="footer" class="page-footer">
               <div class="info-table">
                   <div id="infoLabels">
                       <span><label for="time">Time</label></span></br>
                       <span><label for="value">Value</label></span></br>
                       <span><label for="flag">Flag</label></span></br>
                   </div>
                   <div id="infoBoxes">
                       <span><input id="time" type="text" size="40" /></span></br>
                       <span><input id="value" type="text" size="7" /></span></br>
                       <span><input id="flag" type="text" size="7" /></span></br>
                   </div>
               </div>
           </div>

试试这个。
您可以使用一些CSS行来实现这一点

.info-table{ display:table }
#infoLabels, #infoBoxes{ display:table-row }
#infoLabels > span, #infoBoxes > span{ display:table-cell; }

现在，div结构的作用类似于一个表。

仅CSS

对整个div容器使用类似于表的显示，对行使用
display:table
，对每个单元格使用
display:table row
，可以避免使用
，而只使用CSS集中在元素的形状上

您与IE8和Android 4.1+上的所有设备完全兼容（不支持以前版本的设备，请注意以前的Android）
 我想你误解了问题中的要求。
.info-table{ display:table }
#infoLabels, #infoBoxes{ display:table-row }
#infoLabels > span, #infoBoxes > span{ display:table-cell; }