jquery-mobile - 将jQueryMobile的输入字段中的文本居中放在iPhone上

  显示原文与译文双语对照的内容
0 0

因此,如果你看一下 jsfiddle ( 我发布了 below的代码一致性),你会看到输入文本是居中的。 但是,如果我访问 iPhone ( iOS5 ) 上的jsfiddle ( 在我的测试网站上),文本就会左对齐。 所以,我想知道你们是否知道这是一个解决方案( google - 似乎不是),并且你知道一个解决方案。

css:


.centerText{
 text-align: center;
}​

JS:


$(document).ready(function(){
 $("#popupLogin" ).popup("open" ); 
});​

html :


<!DOCTYPE html>
<html>
<head>
 <title>test</title>
</head>
<body> 
 <section id="home" data-role="page">
 <header data-role="header">
 <h1>test page</h1>
 </header>

 <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
 <h3 class="centerText">Register free!</h3>
 <div class="popup">
 <form> 
 <input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
 <button type="submit" data-theme="b">Sign me up</button>

 <p class="centerText">
 text1<br/>
 text2<br/>
 etc...<br/>
 </p> 
 </form>
 </div>
 </div> 
 </section>
 </body>
</html>

时间: 原作者:

0 0

以下是你的jsFiddle的一些修改: http://jsfiddle.net/Twisty/jb8Jx/2/to只是向你展示了一些尝试和移动占位符的方法。

HTML


<!DOCTYPE html>
<html>
<head>
 <title>test</title>
</head>
<body> 
 <section id="home" data-role="page">
 <header data-role="header">
 <h1>test page</h1>
 </header>
 <div data-role="content">
 <label>Left Align</label><input type="text" placeholder="email" class="leftText">
 <label>Right Align</label><input type="text" placeholder="email" class="rightText">
 <label>Center Text</label><input type="text" placeholder="email" class="centerText">
 <label>Pad Left</label><input type="text" placeholder="email" class="leftPadText">
 </div>
 <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
 <h3 class="centerText">Register free!</h3>

 <div class="popup">
 <form> 
 <input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a" style="text-align: center;"/>
 <button type="submit" data-theme="b">Sign me up</button>

 <p class="centerText">
 text1<br/>
 text2<br/>
 etc...<br/>
 </p> 
 </form>
 </div>
 </div> 
 </section>
 </body>
</html>

CSS


input.centerText{
 text-align: center;
}


input.leftText {
 text-align: left;
}

input.rightText {
 text-align: right;
}

input.leftPadText {
 padding-left: 220px;
}

原作者:
...