响应式文本框jQuery手机

问题描述：

我有jQuery手机中的标签和文本框，当屏幕尺寸发生变化时，整个结构也发生了变化。响应式文本框jQuery手机

当我的屏幕尺寸宽度小于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来覆盖它，并始终在任何屏幕尺寸旁边的另一个？

我不明白'的块''的.ui-输入text'''在HTML ..它说的是jQuery Mobile的是加入？ –

你不需要注意它。这只是改变了文本框的大小。没有它，它将是100％的大小，但仍然是我提到的事情会发生。 – Danny

对不起，但我正在关注它..我有线 - 试图发现一个问题，我看到有一个CSS类没有在HTML中引用...也许你可以提供http ：//plnkr.co/链接？ –

答

你只需要风格的标签为小屏幕上

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

尝试过，但没有发生任何事情。仍是同样的问题。 – Danny

响应式文本框jQuery手机

相关推荐