1

我正在使用 Jquery 移动版 1.3。我有一个输入，

        <input style="width: 75px" type="text"  />

问题是它的大小总是很大。怎么变小，

http://jsfiddle.net/2bWfL/163/

<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    

        <input type="text" style="width:75px"/>
    </div><!-- /content -->

</div><!-- /page -->

</body>
4

2 回答 2

6

JQuery Mobile 的所有控件都有默认大小（以百分比表示），并且 JQM 也将我们编写的 html 标签替换为它自己生成的标签（通常是 spans），所以为了改变文本框的宽度，添加以下代码您页面的头部。

<style type="text/css">
.ui-input-text
{
width: 75px !important;
}
</style>

由于 JQM 控件会根据屏幕大小自行调整，因此建议使用百分比而不是 'px' 值或 'em'。

于 2013-03-25T08:47:35.877 回答
1

如果您想在同一页面上输入不同大小的文本，请从 CSS 中删除 width 属性，如下所示

div .ui-input-text {  padding: 0 .4em; }

然后在您定义输入文本的 html 页面上，将其定义如下

<div style="width:30px"><input type="text" placeholder="01">

所以在你的 div 标签中定义你想要的宽度，你就可以为不同的文本输入提供不同的宽度。希望这个答案对像我这样的非设计师有帮助

谢谢

于 2013-07-03T11:26:32.950 回答