Выравнивание значков для выбора тега - PullRequest
Новая
       1

Выравнивание значков для выбора тега

0 голосов
/ 25 января 2011

Я пытаюсь сделать мою форму красивой, я не уверен, что я делаю.У меня есть два поля выбора и два набора значков, которые я хотел бы отформатировать следующим образом: 

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

Левый и правый значки в середине перемещают элементы в и из полей выбора и вверх и вверх.стрелки вниз слева перемещают элементы в Select 1 вверх и вниз.Какой простой способ получить этот макет с CSS?Я смог взломать что-то вместе с таблицей, мне не повезло с чистым решением CSS.

Ответы [ 2 ]

0 голосов
/ 25 января 2011

ПРИМЕЧАНИЕ: Не поддерживает кросс-браузер - 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>
0 голосов
/ 25 января 2011

Вот, пожалуйста:

Демонстрация в реальном времени

Я позволил себе добавить 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>
...