对齐图标以选择标签答案

【问题标题】：Aligning icons to select tag对齐图标以选择标签
【发布时间】：2011-01-25 09:02:16
【问题描述】：

我正在尝试使我的表单漂亮我不确定我在做什么。我有两个选择框和两组图标，我想像这样格式化：

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

中间的左右图标将项目移入和移出选择框，左侧的向上和向下箭头移动 Select 1 中的项目向上和向下。用 css 获得这种布局的简单方法是什么？我已经能够用一个表来破解一些东西，而我没有用纯 css 解决方案。

【问题讨论】：

在jsFiddle 上发布您的餐桌解决方案。这样，有人可以创建看起来相同但使用 CSS 进行布局的东西。
感谢您的提示——我以前没有看过那个网站。这是我想要的：jsfiddle.net/rTJHK/4

标签： css blueprint-css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

Here's 您的解决方案的实时版本 - 我很想知道它在 IE 中的效果如何。不幸的是，它甚至在 IE8 中也不起作用。不过在 Firefox 中看起来很不错。
是的，当我看到你也发布了一个时，我急忙回答。 :P 哦，好吧。
两个答案都是正确的——非常感谢你们俩。