Aligning icons to select tag

≡放荡痞女 提交于 2019-12-25 14:22:37

问题


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

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.


回答1:


Here you go:

Live Demo

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.

I also added size="4" to the <select> tags to ensure consistent height between different browsers.

I didn't touch the JS.

Tested in 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:


NOTE: Not cross-browser friendly - 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>


来源:https://stackoverflow.com/questions/4788302/aligning-icons-to-select-tag

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!