1

表形式/キー値のデータがたくさんあります。このjsFiddleのように、ユーザーが最初の項目をクリックすると、常に1つの項目と残りの項目が表示されます。

<div data-role="collapsible">
  <h3><div class="ui-grid-a">
      <div class="ui-block-a">Customer:</div>
      <div class="ui-block-b">Mario's Plumbing</div></div></h3>
  <ul data-role="listview">
  <li><div class="ui-grid-a">
      <div class="ui-block-a">Phone:</div>
      <div class="ui-block-b">1-800-MUS-ROOM</div></div></li>
  ...
  </ul>
</div>

ただし、jQuery Mobileがヘッダーアイテム（「顧客：Mario's Plumbing」）にアイコンを追加すると、値フィールド、つまり「Mario's Plumbing」は、<ul>リストの値フィールド、つまり「1-」と一致しません。 800-MUS-ROOM」。

jQueryはアイコンを「Customer：Mario's Plumbing」ボックスと並べて配置していると思います---これは私が見ているものと互換性があります：ミスアライメントはキーフィールドのボタン幅の100％と50％のように見えます値フィールドのボタン。ui-grid-a（50/50分割を実行）を使用すると予想されます。アイコンを左側の50％の一部、つまりボックスの横ではなく内側に配置したいと思います。それをしてもいいですか？どのように？それは簡単なCSSかもしれません、そして私はCSSリタードです:)

4

1 に答える 1

0

jQueryモバイル要素スタイルがうまく連携していないようです。この場合は折りたたみ可能なブロックとグリッドレイアウトスタイルです。

折りたたみ可能なブロックは、ヘッダーを埋めるアイコンとスタイルを追加します。

.ui-btn-inner {
    padding:.6em 20px;
}

追加のルールは、左をさらにパディングします（テキストをアイコンから遠ざけるため）

.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {
    padding-left: 40px;
}

ただし、これにより、すべてのヘッダーテキストが40px左にプッシュされます。

不一致を修正するために私が見つけることができる唯一の方法は、2番目のブロックを左に移動するルールを追加することです。次のルールを追加すると、テキストが再び整列します。

.ui-collapsible-heading .ui-btn-inner .ui-grid-a .ui-block-b {
    margin-left:-10px;
}

ローカルのChromeブラウザのテストでは、さまざまなページズームレベルで正常に動作するようですが、モバイルデバイスではテストしていません。

編集：また、例とフィドルにはタイプミスがありますが、マリオの配管un-block-bにはありません。ui-block-b

于 2012-10-29T12:14:51.140 に答える