对齐图标以选择标记 [英] Aligning icons to select tag

问题描述

我试图让我的表格漂亮我不知道我在做什么。我有两个选择框和两组图标，我想这样格式化：

I'm attempting to make my form pretty I'm not sure what I'm doing. I've got two select boxes and two sets of icons that I would like to format like this:

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

中间的左右图标将项目中的项目移动到选择框，并从左侧的向上和向下箭头将选择1中的项目向上和向下移动。什么是一个容易的方式来获得这个布局与CSS？

The left and right icons in the middle move items to and from the Select boxes and the up and down arrows on the left move items in Select 1 up and down. Whats an easy to way to get this layout with css? I've been able to hack something together with a table I've had no luck with a pure css solution.

推荐答案

在这里，我已经能够使用一个简单的css解决方案you go：

Here you go:

现场演示

我自由添加 cursor：pointer 。从语义的角度看，如果你将它们从< img> 标签更改为< a> 标签。

I took the liberty of adding cursor: pointer to the buttons. It would be better from a semantic point of view if you changed them from <img> tags to <a> tags.

我还在< select>添加了 size =4 ;

我没有碰到JS。

在IE7 / 8，Firefox，Chrome，Opera，Safari中测试。

Tested in IE7/8, Firefox, Chrome, Opera, Safari.

CSS： b

#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>

这篇关于对齐图标以选择标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！