Question

我在小型jquerymobile项目上工作，我需要在单个<td>内对齐三个输入，但我不知道该怎么做。我已经找到了几个用css和输入标签内的类来做的例子，我试图做一些但是它不起作用，可能是因为我在class内调用了js函数或者我失踪了别的。

Jsfiddle示例：http://jsfiddle.net/rzde9dsv/

HTML：

<table>
    <tbody>
        <tr>
            <td>
                <span>
                    <label for='name'> Name 1 </label>
                    <input type='text' width='20px' name='name' id='id' class='qty' value='0' />
                    <input type='button' id='qty1' width='20px' height='20px' value='Plus' class='plus' />
                    <input type='button' id='qty2' width='20px' height='20px' value='Minus' class='minus' />
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span>
                    <label for='name'> Name 2 </label>
                    <input type='text' width='20px' name='name2'  id='id' class='qty' value='0' />
                    <input type='button' id='qty1' width='20px' height='20px' value='Plus' class='plus' />
                    <input type='button' id='qty2' width='20px' height='20px' value='Minus' class='minus' />
                </span>
            </td>
        </tr>
        <tr>
            <td width='100px'>
                <span class='sidebyside'>
                    <label for='name'> Name 3 </label>
                    <input type='text' width='20px' name='name3'  id='id' class='qty' value='0' />
                    <input type='button' id='qty1' width='20px' height='20px' value='Plus' class='plus' />
                    <input type='button' id='qty2' width='20px' height='20px' value='Minus' class='minus' />                    
                </span>
            </td>
        </tr>
    </tbody>
</table>

JS功能：

$(function () {
    $('.plus').on('click',function(){
        var $qty=$(this).closest('span').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 1);
        }
    });
    $('.minus').on('click',function(){
        var $qty=$(this).closest('span').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 1);
        }
    });
});

提前谢谢。

Answer 1

每个输入都需要（td）

演示我为你做了第一行

http://jsfiddle.net/46Lqyarx/

您需要更改功能以从 tr 而不是范围获取最接近的数量，以使加号和减号按钮执行他们的工作

 var $qty=$(this).closest('tr').find('.qty')


    <td>
        <span>
            <label for='naziv'> Name 1 </label>
            <input type='text' style='text-align: left' width='20px' name='name' align='left' id='id' class='qty' value='0' /></td>
        <td><input type='button' style='text-align: center' id='qty1' width='20px' height='20px' value='Plus' class='plus' /></td>
            <td><input type='button' style='text-align: right' id='qty2' width='20px' height='20px' value='Minus' class='minus' />
        </span>
    </td>
</tr>
<tr>
    <td>

CSS 将按钮向下移动一点。如果你有其他类型的按钮，你可能需要添加课程

.ui-btn {
margin-top: 23px;
}

enter image description here

Answer 2

您的问题很不清楚，因为您没有说明如何对齐它们。

我假设你想要第三套 inline ，因为你有一个班级sidebyside

这还没有完成，但会给你一个想法

所以你可以做的事情，虽然一开始就需要处理，但是在页面中添加以下CSS。这将迫使sidebyside的所有第一个孩子向左浮动。另外在标签上加一些填充物（很脏）

.sidebyside > *{ float:left; line-height:1.2} /* this line says, all immediate children of sidebyside, do this */
.sidebyside label {padding-top:15px;}

同样删除了包含width的{{1}}上的td ，因为这会阻止任何内容

这是您的jsFiddle

Answer 3

我会这样做：

取出这样的标签：

<table>
<tbody>
    <tr>
        <td>
            <label for='naziv'> Name 1 </label>
            <span>

                <input type='text' name='name' id='id' class='qty' value='0' />
                <input type='button' value='Plus' class='plus' />
                <input type='button' value='Minus' class='minus' />
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <label for='naziv'> Name 2 </label>
            <span>

                <input type='text' name='name2'  id='id' class='qty' value='0' />
                <input type='button' id='qty1' value='Plus' class='plus' />
                <input type='button' id='qty2' value='Minus' class='minus' />
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <label for='naziv'> Name 3 </label>
            <span class='sidebyside'>

                <input type='text' name='name3'  id='id' class='qty' value='0' />
                <input type='button' id='qty1'value='Plus' class='plus' />
                <input type='button' id='qty2' value='Minus' class='minus' />                    
            </span>
        </td>
    </tr>
</tbody>

并添加以下CSS：

td>label{
    text-align: left;
    width: 100%;
}
td>span{
    display: block;
    overflow: auto;
    zoom: 1;
}
td>span>*{
    float: left;
    width: 80px;
}

如何在内部对齐多个输入

3 个答案: