3

私は単純な間違いであると確信していることに車輪を回しています。

次の jqm (バージョン 1.3) ビュー (haml) を検討してください。

#main-header{'data-role' => 'header'}

#main-content{'data-role' => 'content'}   #main-buttons
    %input#a{'type' => 'button', 'name' => 'a', 'value' => 'A'}
    %input#b{'type' => 'button', 'name' => 'b', 'value' => 'B'}

スタイルシート:

#main-buttons {
  margin: 30px;
  margin-top: 160px;
}   

#a {
  margin-bottom: 60px !important;
}

ここで、ボタン「a」に適用する margin-bottom のスタイルは何の影響もありません。私の目標は、2 つのボタンの間に垂直方向のスペースを追加することです。私は何が欠けていますか？

レンダリングされた UI は次のようになります。

レンダリングされたUI

4

4 に答える 4

7

これが私の謙虚な答えです。上記の回答は、問題の詳細を説明しています。

ボタンのスタイルをオーバーライドするには、スタイルを に追加します.ui-btn。

お役に立てて光栄です:)

于 2013-03-27T19:28:09.997 に答える
2

解決策 1

これは a タグから作成されたボタンです。

これが実際の例です：http://jsfiddle.net/Gajotres/9bPA2/

<div data-role="content">
    <a data-role="button" id="button1">Button 1</a>
    <a data-role="button" id="button2">Button 2</a>
</div>

#button1 {
    margin-bottom: 50px;
}

解決策 2

これはあなたが使用しているボタンです。残念ながら、css を使用して修正できますが、次のように jQuery を介して行う必要があります。

HTML :

<input type="button" value="Button 3" id="button3">
<input type="button" value="Button 4" id="button4">

Javascript :

$('#button3').parent().css('margin-top','50px');
$('#button4').parent().css('margin-top','50px');

ライブの例はトップの jsFiddle の例の一部ですので、ご覧ください。

于 2013-03-27T18:46:26.650 に答える
1

最初に、スタイルシートへのリンクが、HTML ページのヘッド セクションにある jQuery モバイル スタイルシートへのリンクの後にリストされていることを確認します。2 つのスタイルが競合する場合、ブラウザは 2 番目にあるスタイルシートを使用します (たとえば、下にリストされている css)。

また、margin-bottom を ID #a に追加しています。これは完全に有効ですが、タグに適用されたスタイルは ID に適用されたスタイルよりも優先されるため、CSS の残りの部分を調べて、INPUT に適用されたマージンがあるかどうかを確認してください。

于 2013-03-27T18:26:55.660 に答える