Question

我正在使用Jquery mobile 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>

Answer 1

JQuery Mobile的所有控件都有默认大小（以百分比表示），JQM也会用我们自己生成的标签（通常为spans）替换我们编写的html标签，因此为了更改文本框的宽度，添加将代码发送到页面的头部。

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

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

Answer 2

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

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

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

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

因此，在div标签中定义所需的宽度，您将能够为不同的文本输入提供不同的宽度。希望这个答案有助于像我这样的非设计师

由于

Jquery Mobile 1.3和输入大小问题？

2 个答案: