Question

我有两个动态创建的文本框。如何使它们对齐正确的位置。我是说我有

PhoneNo:123646
1234455
Now i have to get a output as 
PhoneNo:123646 
        1234455

是否可以这样做。这些文本框中的电话号码是在输出处动态创建的。

Answer 1

这个html的组合：

<div>
    <div class="container label">PhoneNumbers:</div>
    <div id="numberToAdd" class="container"></div>
</div>

这个css：

.container
{
    display: inline-block
}

.label
{
    vertical-align: top
}

.phoneNumbers
{
    display: block
}

然后将phoneNumbers类添加到文本框中就可以了。这是行动中的小提琴

http://jsfiddle.net/ozrevulsion/6kL61kw1/

如果不是，那么您需要在问题中添加更多详细信息，以便我更有帮助。

Answer 2

以表格格式生成

<table>
<tr>
    <td>
        <label>Phone No 1:</label>
    </td>
    <td>
        <input type="text" id="phoneno1"/>
    </td>
</tr>
<tr>
    <td>
        <label>Phone No 2:</label>
    </td>
    <td>
        <input type="text" id="phoneno2"/>
    </td>
</tr>

Answer 3

请尝试此

$(document).ready(function(){
    var offSetValue = $('.append').offset().left - 8;
    $(".append:gt(0)").css('margin-left',offSetValue+'px');
});

DEMO

但上面的例子不适用于动态crated元素。仅用于展示我写的那个演示。为了使它成为写下面的函数。

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified
    // call the function again after 100 milliseconds

    addStyle();

    setTimeout( checkDOMChange, 100 );
}

function addStyle(){
    var offSetValue = $('.append').offset().left - 8;
    $(".append:gt(0)").css('margin-left',offSetValue+'px');
}

如何以垂直方式对齐文本框

3 个答案: