javascript - 响应式文本框 jQuery Mobile

Question

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

当我的屏幕宽度小于 448px 时，它会转到标签下的标签和文本框，但当它大于 447px 时，它会一个接一个地出现。

为了清楚起见，我添加了两张照片。

这是代码:

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

您只需要在小屏幕上将标签样式设置为 block

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