jquery - 当文本框与标签位于不同的 div 中时水平对齐文本框

标签 jquery html css textbox label

我正在尝试将一系列文本框与其相应的标签对齐。由于它们位于两个不同的 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'));                
    });
});

http://jsfiddle.net/apandit/k5max5fw/1/

提前致谢。

最佳答案

JSFiddle

仅限 CSS

使用类似表格的显示 display : table对于整个 div 容器，display : table-row对于行和 display : table-cell对于每个单元格，您可以避免使用 <table></table>并仅使用 CSS 专注于元素的形状。

您完全兼容所有 IE8 和 Android 4.1+ 设备(不支持之前版本的设备，注意以前的 Android)。 More information on caniuse.com for display table, table-row, table-cell support .

关于jquery - 当文本框与标签位于不同的 div 中时水平对齐文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31811260/