JQuery 移动设备 - 在 table 内的同一行上输入和标注，无论屏幕宽度如何

Question

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

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

Answer 1

这是因为这是 fieldcontain 的默认行为。如果您在媒体查询被命中时使用您的控制台观察 CSS 变化，您会看到事情正在发生。您可以为这些容器创建您自己的 class，或在您的 CSS:

中添加覆盖

示例fiddle：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;
}

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

Answer 2

Bitwise Creative 给出了很好的答案。作为替代方案，如果您无论如何都在使用 table，为什么不去掉 fieldcontain 并只使用 4 个 table 单元格而不是 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;
}

Updated FIDDLE

JQuery 移动设备 - 在 table 内的同一行上输入和标注，无论屏幕宽度如何

JQuery Mobile - Have input and label on the same line inside table, regardless of screen width

html

css

jquery

jquery-mobile