アイコンを選択タグに合わせる

Question

私のフォームをきれいにしようとしていますが、私は何をしているのか分かりません。してから、選択ボックスや上下の矢印ミドル移動項目に

^ +-------------+  +--------------+ 
| |    | <-- |    | 
    | Select 1 | --> | Select 2 | 
| |    |  |    | 
v +-------------+  +--------------+ 

左と右のアイコン：私は、私はこのようなフォーマットしたい2つの選択ボックスとアイコンの2セットを持っています左側のSelect 1の項目を上下に移動します。 CSSでこのレイアウトを取得する方法は簡単ですか？私はテーブルと一緒に何かをハックすることができました。私は純粋なCSSソリューションで運がなかったのです。ここで

Answer 1

あなたが行く：

Live Demo

私はボタンにcursor: pointerを追加する自由を取りました。意味の観点から、<img>タグから<a>タグに変更した方が良いでしょう。

また、異なるブラウザ間の高さを一定にするため、<select>タグにsize="4"タグを追加しました。

私はJSに触れなかった。

IE7/8、Firefox、Chrome、Opera、Safariでテストされています。

CSS：

#container { 
    overflow: auto; 
    background: #ccc 
} 
.buttons { 
    float: left; 
    width: 30px; 
    padding: 0 3px 
} 
.buttons img { 
    cursor: pointer 
} 
.dropdown { 
    float: left; 
    width: 160px 
} 

HTML：

<div id="container"> 
    <div class="buttons"> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-up.gif" id="up_button"><br> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-down.gif" id="down_button"> 
    </div> 

    <div class="dropdown"> 
     <select multiple=true id="left" size="4"> 
     <option>Patricia J. Yazzie</option> 
     <option>Michael A. Thompson</option> 
     </select> 
    </div> 

    <div class="buttons"> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-left.gif" id="add_button"><br> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-right.gif" id="remove_button"> 
    </div> 

    <div class="dropdown"> 
     <select multiple=true id="right" size="4"> 
     <option>Kevin C. Bounds</option> 
     <option>Patricia J. Yazzie</option> 
     <option>Michael A. Thompson</option> 
     <option>Mark D. Mercer</option> 
     </select> 
    </div> 
</div> 

Answer 2

注：クロスブラウザ友好的ではない - JSFiddle。

<style type="text/css"> 
    .form-wrap div { 
     display: inline-block; 
     float: left; // makes it work in IE, but breaks it in Firefox 
     vertical-align: middle; 
    } 
    .form-wrap img { display: block; } 
</style> 

<div class="form-wrap"> 
    <div class="buttons-left"> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-up.gif" id="up_button"> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-down.gif" id="down_button"> 
    </div> 

    <div class="select-left"> 
     <select multiple=true id="left"> 
      <option>Patricia J. Yazzie</option> 
      <option>Michael A. Thompson</option> 
     </select> 
    </div> 

    <div class="buttons-mid"> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-left.gif" id="add_button"> 
     <img src="http://www.jgrmx.com/cgr/tiles/generic/images/icons/arrow-right.gif" id="remove_button"> 
    </div> 

    <div class="select-right"> 
     <select multiple=true id="right"> 
      <option>Kevin C. Bounds</option> 
      <option>Patricia J. Yazzie</option> 
      <option>Michael A. Thompson</option> 
      <option>Mark D. Mercer</option> 
     </select> 
    </div> 
</div>