Встроенный div действует как блок, когда содержит кнопки ввода блока

Question

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

+----------------------+-+       +----------------------+-+
|                      | |  ___  |                      | |
|                      | | |_>_| |                      | |
|                      | |  ___  |                      | |
|                      | | |_<_| |                      | |
|                      | |       |                      | |
|______________________|_|       |______________________|_|

У меня есть следующий HTML-код:

<div id='recipientSelection'>
    <div class='clientsBox'>
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' />
        <input type='button' id='removeButton' value='<' />
    </div>
    <div class='clientsBox'>
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>

И следующий CSS-код:

div#recipientSelection {
    margin-left: 50px;
    width: 90%;
}

select#allClients {
    width: 25%;
}

select#chosenClients {
    width: 25%;
}

div.clientsBox {
    display: inline;
}

div#clientButtons {
    display: inline;
    width: 15%;
}

input#appendButton {
    display: block;
}

input#removeButton {
    display: block;
}

Если я сделаюэлементы блока кнопок, их содержащий div начинает действовать так же, как и элемент блока.Я хочу, чтобы кнопки были блочными элементами относительно друг друга, но я хочу, чтобы панель кнопок совмещалась с элементами выбора.Я подозреваю, что здесь есть что-то важное, чего я не понимаю.Помощь

Answer 1

1. Элементы уровня блока недопустимы внутри встроенных элементов

2. Обычно один из них перемещает три блока один за другим, оставляя их блоки

---

div.clientsBox {
    float: left;
}

div#clientButtons {
    float: left;
    width: 15%;
}

Answer 2

Мне удалось добиться желаемого вида с помощью следующего кода.Не уверен, пытались ли вы держаться подальше от поплавков или чего-то еще, но это работает

CSS:

    div#recipientSelection {
        margin-left: 50px;
        width: 90%;
    }

    select#allClients {
        width: 100%;
    }

    select#chosenClients {
        width: 100%;
    }

    div.clientsBox {
        float:left;
        width: 30%;
    }

    div#clientButtons {
        float:left;
        width: 4%;
        margin-left:20px;
    }

HTML

<div id='recipientSelection'>
    <div class='clientsBox' style="clear:left;">
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='&#62;' /><br />
        <input type='button' id='removeButton' value='&#60;' />
    </div>
    <div class='clientsBox' style="clear:right;">
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>

Answer 3

Существует свойство CSS display: inline-block, но оно поддерживается не всеми браузерами. С этим немного обновленным кодом

<div id='recipientSelection'>
    <div id='allClients'>
        <select size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='chosenClients'>
        <select size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' /><br/>
        <input type='button' id='removeButton' value='<' />
    </div>
    <div style="clear: both"></div>
</div>

Вы можете использовать этот действующий CSS, чтобы показать, что вы хотите

div#recipientSelection { width: 90%; margin: 0 auto; text-align: center; }
div#allClients { width: 25%; float: left; }
div#chosenClients { width: 25%; float: right; }
div#allClients select, div#chosenClients select { width: 100%; }
div#clientButtons { display: block; width: 15%; text-align: center; margin: 0 auto; }

Answer 4

<html>
<head>
<style>
#recipientSelection{width:300px}
.clientsBox{width:40%}
#clientButtons{width:20%}
.clientsBox,
#clientButtons{display:block;float:left}
#clientButtons{text-align:center}
</style>
</head>
<body>
<div id='recipientSelection'>
    <div class='clientsBox'>
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' />
        <input type='button' id='removeButton' value='<' />
    </div>
    <div class='clientsBox'>
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>
</body>
</html>