JQuery Mobile 1.4文本输入宽度

我最近切换到JQuery Mobile 1.4，虽然总体上我更喜欢1.3，但我有很多格式问题。JQuery Mobile 1.4文本输入宽度

我想要一个可更改值的列表，这是我正在使用的代码。

<div class="ui-field-contain"> 
<label for="name">Amount</label> 
<input type="number" name="name1" id="name1" value="" style="width:75px"/> 
</div>

我加了宽度：960x75像素，看它是否会工作，但它是所有移动的号码选择箭头 - 它实际上并没有使文本框较小。

因此，文本框与其容器一样宽，但数量有限。它在电脑上看起来很好，但在移动设备上，如果过度限制，最终会在文本框顶部显示标签文本。

有没有办法解决这个问题？

来源

2014-01-24 Subjective Effect

尝试

.ui-input-text{ 
    width: 75px !important; 
}

JQM把一个DIV与周围的类的.ui输入文本输入，所以你需要设置它的宽度，然后输入你充满。如果您不希望所有文本输入设置为75px，则可能希望使CSS更具体;

来源

2014-01-24 17:54:32 ezanker

我一直在使用 “#myid { 宽度！：960x75像素重要; }” 尝试，但它不能正常工作。我如何控制个人元素？ –

使答案更完整。我很难控制标签旁边的文本框的大小，下面的图片是我试图实现的。将所有文本框设置为特定大小有时不相关。像Address和Zip这样的情况会让用户界面在桌面上看起来太长，但只能在移动设备上正常显示。

enter image description here

下面的代码是我如何实现它。对于擅长CSS的人来说，这对我来说可能是一个初学者，这非常有帮助。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 
<body> 
 
<style> 
 

 
#id1 .ui-input-text { width: 150px !important } 
 
</style> 
 
<div data-role="page"> 
 
    <div data-role="main" class="ui-content"> 
 
    <form method="post" action="demoform.asp"> 
 
     <div class="ui-field-contain"> 
 
     <label for="address">Address:</label> 
 
     <input type="text" name="address" id="address" > 
 
     </div> 
 
     <div class="ui-field-contain" id="id1"> 
 
     <label for="zip">Zip Code:</label> 
 
     <input type="text" name="zip" id="zip" > 
 
     </div> 
 
     
 
     <input type="submit" data-inline="true" value="Submit"> 
 
    </form> 
 

 
    
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-04-29 10:28:37

您还可以使用jQM的data-wrapper-class属性为输入的容器div分配一个类：http://jsfiddle.net/ezanker/qvqafvbx/ APIdoc：http://api.jquerymobile.com/textinput/ ＃期权wrapperClass – ezanker

JQuery Mobile 1.4文本输入宽度

回答

相关问题