Question

我最近转而使用JQuery Mobile 1.4，虽然总体而言我更喜欢1.3，但我有很多格式问题。

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

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

我添加了宽度：75px以查看它是否可以工作，但它只是移动数字选择箭头 - 它实际上并没有使文本框变小。

所以文本框和容器一样宽，但只有有限的数量。它在计算机上看起来很好，但在移动设备上如果限制太多，最终会在文本框顶部显示标签文本。

有什么方法吗？

Answer 1

尝试

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

jQM使用类.ui-input-text在输入周围放置一个DIV，因此您需要设置其宽度，然后输入将填充它。如果您不希望所有文本输入都设置为75px;

，您可能希望使CSS更具体

Answer 2

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

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>

JQuery Mobile 1.4文本输入宽度

2 个答案: