Question

我正在使用jquery mobile。我想在表格单元格内的同一行上有一个标签和一个输入。表格和单元格具有固定的宽度，因此，我认为，单元格内的布局将独立于窗口宽度。但是，如果我使用this jsfiddle中的代码并使结果窗口变窄，标签和输入将显示在不同的行上，如果我使结果窗口变宽，它们将显示在同一行上。这看起来很奇怪，因为当我更改结果窗口的大小时，单元格宽度不会改变。关于发生了什么以及如何在同一条线上显示它们的任何想法，即使窗口很窄？

HTML：

<table>
    <tbody>
        <tr>
            <td>
                <div data-role="fieldcontain">
                    <label for="cost1">$</label>
                    <input type="text" name="cost1" id="cost1" value=""/>
                </div>
            </td>
            <td>
                <div data-role="fieldcontain">
                    <label for="cost2">$</label>
                    <input type="text" name="cost2" id="cost2" value=""/>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS：

td {
    width: 10em;
    border: 0.1em solid black;
}
table {
    table-layout: fixed;
    width: 20em;
}

顺便说一句......我在SO和其他地方看到了类似的问题，但我不确定在各种情况下允许这些问题在同一条线上的重要部分是什么。在我的情况下，我最终会根据一些javascript显示“$”显示，并希望输入根据可用的剩余空间进行相应的调整。

Answer 1

这是因为这是fieldcontain的默认行为。如果您在媒体查询被点击时使用控制台观看CSS更改，您将看到发生的事情。您可以为这些容器创建自己的类，或者在CSS中添加覆盖：

示例小提琴：http://jsfiddle.net/ks7201ov/

.ui-field-contain>label {
    float: left;
    width: 20%;
}
.ui-field-contain>label~[class*=ui-] {
    float: left;
    width: 78%;
}
.ui-field-contain:before, .ui-field-contain:after {
    content: "";
    display: table;
}
.ui-field-contain {
    padding: 0;
    margin: 1em 0;
}

自定义类可能会更好，因为覆盖方法有时会很麻烦（请注意，小提琴的窄版标签会跳起来）。

Answer 2

Bitwise Creative给出了一个很好的答案。作为替代方案，如果你正在使用一个表，为什么不摆脱fieldcontain只使用4个表格单元而不是2？

<table>
    <tbody>
        <tr>
            <td class="labelcell"><label for="cost1">$</label></td>
            <td class="inputcell"><input type="text" name="cost1" id="cost1" value=""/></td>
            <td class="labelcell"><label for="cost2">$</label></td>
            <td class="inputcell"><input type="text" name="cost2" id="cost2" value=""/></td>
        </tr>
    </tbody>
</table>

CSS：

table {
    table-layout: fixed;
    width: 20em;
    border-collapse: collapse;
}
td{
    border: 0.1em solid black; 
    vertical-align: middle;
}
td.inputcell {
    width: 9em;    
    border-left: 0;
    padding-right: 4px;
}
td.labelcell {
    width: 1em;
    border-right: 0;
    padding-left: 2px;
}

更新了 FIDDLE

JQuery Mobile - 无论屏幕宽度如何，都在表格内的同一行上输入和标注

2 个答案: