响应式文本框jQuery mobile

Question

我在jQuery mobile中有标签和文本框，当屏幕尺寸发生变化时，整个结构也会发生变化。

当我的屏幕尺寸宽度小于448像素时，它会转到标签下的标签和文本框，但是当它高于447像素时，它就是一个接近另一个。

我要添加两张照片以便清楚。

这是代码：

HTML：

<div role="main" class="ui-content">
        <form>
            <div class="ui-field-contain">
                 <label for="sales1">Sales:</label>
                 <input type="text" id="sales" value="">
            </div>
</form>
</div>

的CSS：

.ui-field-contain .ui-input-text {
  width: 50% !important;
}

css是否有任何方法可以覆盖它并且在任何屏幕尺寸中总是紧挨着另一个？

Answer 1

您只需将标签样式设置为小屏幕上的块

@media (max-width: 448px) {
  .ui-field-contain label {
    display: block;
  }
}