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 に答える