在jQuery mobile中对齐多个文本标签和输入标签

Question

我遇到了jQuery mobile的问题。我想将文本标签和输入标签对齐在同一行。

我试过这个CSS：

.input-topic {
float: left;
display: inline-block;
padding-right: 10px;
padding-top: 15px;
}

.input-content {
display: block;
float: left;
}

.input {
height: 20px;
}

当我使用

时

<label for="LitNameInput" class="input-topic">Name:</label>
<div class="input-content">
<input type="text" id="LitNameInput" placeholder="Name Surname" class="input"><p style="margin: 1px;"></p>
</div>

如果屏幕尺寸合适，它会起作用，否则会显示可怕的结果!!

以下是JSFiddle，因此您可以更改结果部分的宽度以查看发生的情况。

感谢您提出的所有建议和解决方案。

Answer 1

您希望姓名，电话和电子邮件在同一条线上吗？我建议使用jQuery Mobile提供的响应式网格和字段包含。那样，在较大的宽度上，它们都可以放在同一条线上，但是在较小的宽度上它们会叠加。

查看jQuery Mobile： Field Contain 和 Grids （如果您希望网格堆叠在哪里，请向下滚动到响应网格部分这种情况我建议）

如果有帮助，请告诉我。