Question

所以，如果你看一下jsfiddle（我发布了下面的代码以保持一致性），你会发现输入文本是居中的。但是，如果我在我的iPhone（iOS5）上访问jsfiddle（和我的测试网站上），文本就会左对齐。所以，我想知道你们可能知道这是一个知道问题（谷歌搜索 - 似乎没有），你知道一个解决方法。

的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>

Answer 1

这里有一些修补你的jsFiddle：http://jsfiddle.net/Twisty/jb8Jx/2/只是告诉你一些尝试和移动占位符的方法。

<强> 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;
}

将文本置于iPhone上jQueryMobile的输入字段中

1 个答案: