0

追加/削除ボタンを備えたリスト ビュー コントロール シャトルを作成しています

私が見つけたこのVB（グロス）画像の例に似たコントロールのようなもの：

基本的なビジュアルの例

ただし、追加ボタン>と削除<ボタンのみが中央に垂直に配置されています。

最初に、横に並べたuls とボタンを実現するためにフローティングを試みましたが、コンテナの中央にボタンを垂直に配置することができませんでした。

withを使用したソリューションを調べました。これは、すべてのコンテナーに適用した場合に機能します。ただし、 sを上に揃えたいです。inline-blockvertical-align: middleul

<div class="wrapper">
  <div class="inblock vert-top">
    <ul>
      <li>item list view</li>
      <li>...</li>
    </ul>
  </div>
  <div class="inblock vert-middle">
    <div>
      <button>&gt;</button>
    </div>
    <div>
      <button>&lt;</button>
    </div>
  </div>
  <div class="inblock vert-top">
    <ul>
      <li>item list view</li>
      <li>...</li>
    </ul>
  </div>
</div>

.wrapper {
  vertical-align: middle;
}

.inblock {
  display: inline-block;  
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
}

.inblock.vert-top {
  vertical-align: top;
}

.inblock.vert-middle {
  vertical-align: middle;
}

http://cssdesk.com/2ZCAe (jsFiddle に類似)

2 番目の の使用.inblock.vert-middleは機能しませんul。適用されると、ボタン コンテナーが一番上に送信されます。ただし、.inblock.vert-middle2番目のulディスプレイに使用すると、希望どおりに表示されますが、意味がありません。

CSS を修正して 2 番目の に意味を持たせるにはどうすればよいですulか、またはこれらのボタンを垂直方向に正しく配置するにはどうすればよいですか?

4

1 に答える 1

1

おそらくそれは最もエレガントな解決策ではないかもしれませんが、テーブルがあれば十分でしょう。要素にvertical-align: middle適用すると、コンテンツが垂直方向の中央に配置されます。display: table-cell

于 2013-01-09T19:11:02.877 に答える