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

内联元素
通常一个人会一个接一个地漂浮这三个方块，然后保留它们

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

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

Answer 4

有一个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; }

当包含块输入按钮时，内联div就像块一样

4 个答案: