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

Question

我正在尝试将一系列文本框与其对应的标签对齐。由于它们位于两个不同的 div 中，因此我无法使用 inherit 关键字。我尝试使用下面的 javascript/jquery 代码来对齐元素对，但是 $(tb).css('left') 只是 returns auto。有谁知道如何使用 html、css、and/or javascript/jquery 而不使用 table 来实现这种对齐？

$(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/

提前致谢。

Answer 1

我认为在这种情况下使用 table 完全可以接受table。如果出于某种原因您不希望这样做，您可以使用 CSS 解决方案通过设置包含 label 和 [=14= 的 span 元素的宽度来实现您的需要] 元素。试试这个：

span {
    display: inline-block;
    margin-right: 10px;
}
span:nth-child(1) {
    width: 245px;
}
span:nth-child(2),
span:nth-child(3) {
    width: 45px;
}
span input {
    width: 100%;
}

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

Answer 2

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>

在每个 span 标签后添加。

css代码，

#infoLabels
{
    float:left;
}

试试这个。

Answer 3

您可以使用 CSS 的一些行来实现。

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

现在 div 结构就像 table 一样。 http://jsfiddle.net/k5max5fw/3/

Answer 4

JSFiddle

CSS 仅

对整个 div 容器使用 table-like 显示 display : table，对行显示 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.

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

Horizontally aligning textbox with label when the two are in different divs

html

css

jquery

label

textbox