自適應文本框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

您只需要在小屏幕上將標簽樣式設置為方塊

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