对齐图标以选择标记

我正在尝试使我的表单变得漂亮我不确定我在做什么。在中间移动项目对齐图标以选择标记

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

左侧和右侧图标，并从选择框和向上和向下箭头：我有两个选择框和两套图标，我想这样的格式化在左侧将选择1中的项目向上和向下移动。什么是一种简单的方法来获得这种布局与CSS？我已经能够用一张桌子破解一些我一直没有使用纯CSS解决方案的运气。

来源

2011-01-24 jmricker

在[jsFiddle]（http://jsfiddle.net）上发布您的表格解决方案。这样，有人可以创建看起来相同的东西，但是使用CSS代替布局。 – thirtydot 2011-01-24 23:52:54

感谢您的提示 - 我以前没有看过该网站。这是我想要去的：http://jsfiddle.net/rTJHK/4/ – jmricker 2011-01-25 00:10:17

在这里你去：

Live Demo

我把增加cursor: pointer到按钮的自由。如果将它们从<img>标签更改为<a>标签，从语义的角度来看会更好。

我还将size="4"添加到了<select>标签，以确保不同浏览器之间的高度一致。

我没碰过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>

来源

2011-01-25 00:39:37 thirtydot

杰出！谢谢！ – jmricker 2011-01-25 02:26:29

注：没有跨浏览器友好 - 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>

来源

2011-01-25 00:41:13 drudge

对齐图标以选择标记

回答

相关问题