jquery - jQuery Mobile-在表格内的同一行上具有输入和标签，而不考虑屏幕宽度

我正在使用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显示“ $”或不显示，并希望根据可用的剩余空间相应地调整输入的大小。

最佳答案

这是因为这是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;
}

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

关于jquery - jQuery Mobile-在表格内的同一行上具有输入和标签，而不考虑屏幕宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28594909/