태그를 선택하기 위해 아이콘 정렬

Question

나는 내가하는 일을 꽤 잘 모르겠다. 와 선택 상자에서 중간 이동 항목에

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

왼쪽과 오른쪽 아이콘과 아래 ​​화살표 : 나는이 같은 포맷하려는 두 개의 선택 상자와 아이콘의 두 세트를 가지고 왼쪽에있는 선택 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>