0

複数のボタンの行を作成して、jQuery Mobile で一貫したブロックを形成したいと考えています。このために、それらを水平方向のコントロール グループに配置しました。このアプローチは単純なラベルには適していますが、ここでは 2 行のテキストを含む 1 つ以上のボタンが必要です。例えば：

<form>
<fieldset data-role="controlgroup" data-type="horizontal">  
  <a href="#" data-role="button" data-icon="minus" data-iconpos="left">Left</a>
  <a href="#" data-role="button">Middle item<br/><sub>Second row</sub></a>
  <a href="#" data-role="button" data-icon="plus" data-iconpos="right"></a>
</fieldset>
</form>

jsfiddle の例。

私の問題は、複数行のラベルは問題なく表示されますが、行の他のボタンにはまだ単一行のラベルに適した幅がある (またはラベルがない) ことです。結果は次のようになります。

3 つのボタンと乱雑なラベルを持つ controlgroup

どうやって ...

  • すべてのボタンを同じ高さにしますか?
  • 1 行のボタン ラベルを垂直方向に新しい高さの中央に配置しますか?
  • アイコンを垂直方向に中央揃えにしますか?
4

2 に答える 2

1

これを試すことができます：

  • 最初のステップ: ID を割り当てます<fieldset>

    <fieldset data-role="controlgroup" data-type="horizontal" id="t">

  • a2 番目のステップ:タグの CSS の変更

     #t a {
  float:none;
  display:table-cell;
  vertical-align:middle;
 }

デモを見るhttp://jsfiddle.net/4qKkf/12/

于 2013-11-01T21:03:28.097 に答える
1

これはdisplay: table-cell;、リンクに均一な高さを与え、垂直方向のセンタリングを可能にするトリックを使用して行うことができますvertical-align

CSS:

a[data-role] {
    display: table-cell; 
    float: none;
    vertical-align: middle;
}

例: http://jsfiddle.net/4qKkf/14/

于 2013-11-01T21:04:00.910 に答える