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

我在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>

如果屏幕大小的大小合适，它就可以工作，否则它会显示一个可怕的结果

下面是示例，因此您可以更改结果部分的宽度以查看发生了什么

---

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

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

查看jQuery-Mobile:并向下滚动到Responsive-Grids部分，如果您想让网格堆叠起来，在本例中，我建议您这样做

---

让我知道这是否有帮助。

为什么使用float:left和display:inline块；同一时间？我是网络开发者的初学者。你能给我一个建议你喜欢哪一个吗@KheemaPandeythis会帮你的。。它很有用，但我尝试删除显示：内联块；但这仍然不能解决我的问题@Kheemapandey您看过jQuery移动字段容器了吗：？谢谢您的回答，但我想要类似名称[]电话[]电子邮件[]的内容，其中[]表示输入标签，是换行符。当屏幕宽度太小时，字段是否包含，网格是否会将列放入行中？如果屏幕宽度太小，响应网格是否会将字段包含放入自己的行中。如果没有足够的空间，字段contain是否会在标签下方的新行上放置输入或[]有什么方法可以强制自动放置？嗯，也许我当时不明白。。如果您担心屏幕太小，那么为什么不希望输入放到下一行？在任何情况下，使用非响应网格，然后。。。尝试此操作是的，您可以将样式应用于或最初两个div都具有50%的宽度。如果您在div上应用样式，则可以更改为如下所示：