1

jquery mobileを使用して2つのボタンを表示する必要があり、コードは次のとおりです：http: //jsfiddle.net/kiranj/rQ3mh/3/

ただし、1）最初のボタンが左揃えで幅が40％に固定されていること、および2）2番目のボタンが右揃えで幅が40％に固定されていることを確認する必要があります。

このシンプルな外観の機能を実現する上で、いくつかの重要なことが欠けているようです。ヘルプに感謝します

参考までに、コードは次のとおりです。HTML：

<!DOCTYPE html> 
<html> 
    <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.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

    <br/><br/><br/>
<div  data-role="fieldcontain">
       <input type="submit" name="agree" data-inline="true" data-corners="false" data-theme="b" id="pageptosagree" value="Agree" />
        <input type="submit" data-inline="true" data-corners="false" name="notAgree" id="pagetosdonotagree" value="I Do Not Agree" />
</div>        

</body>
</html>​

これがcssです：

div.divinput div{
    overflow: hidden;
}

div.divinput div.buttonleft div{ 
    width:40%;
    float:left;
}

div.divinput div.buttonright div {
    float:right;
    width:40%;
}

.clear {
  clear: both; 
}​
4

3 に答える 3

2

jqueryCSSコードのCSSを次のように変更します。

`.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
    float: right;    //just add this single property. Everything will work.
    font-family: Helvetica,Arial,sans-serif;
    text-decoration: none;
}`

使用しているJqueryCSSはここにあります

于 2012-06-29T03:45:37.753 に答える
1

元々含まれていたCSSプロパティを追加/上書きするjquery.mobile-1.1.0.min.cssと、希望する結果が得られると思います。以下のコードを試してください。

CSS

.ui-btn{
width:40%;
}

.ui-btn-up-c,
.ui-btn-hover-c{
float:right;
}

HTML

<div data-role="fieldcontain">
    <input type="submit" name="agree" id="pageptosagree" data-inline="true" data-corners="false" data-theme="b" value="Agree" />
    <input type="submit" name="notAgree" id="pagetosdonotagree" data-inline="true" data-corners="false" value="I Do Not Agree" />
</div>

それがあなたを助けることができることを願っています！

于 2012-06-29T03:34:06.993 に答える
0

私はこれをテストしていました：http：//jsfiddle.net/rQ3mh/8/

これはスタイルを設定する適切な方法ではないことに注意してください。それが機能するかどうかを確認するだけです

これが機能しない理由は、インターフェイスが適用されると、クラス.buttonleftまたは.buttonrightがないためです（要素を調べてクラス名を確認してください）。したがって、これらのdivをアドレス指定する唯一の方法は番号です。たぶん、jquery mobileに関するドキュメントと、クラスをインターフェイスに適用する方法、または少なくともクラスをインターフェイスから継承する方法を確認する必要があります。<input>

それが少し役立つことを願っています。

于 2012-06-28T17:57:54.283 に答える