0

因此，如果您查看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>
4

1 回答 1

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;
}
于 2012-11-30T19:32:18.383 回答