Inline div acts like block when containing block input buttons
I'm not great with CSS, but I want to create two select lists with a button panel between them to control the movement of selected items back and forth. I want it to look like this:
+----------------------+-+ +----------------------+-+
| | | ___ | | |
| | | |_>_| | | |
| | | ___ | | |
| | | |_<_| | | |
| | | | | |
|______________________|_| |______________________|_|
I have the following 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>
And the following 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;
}
If I make the buttons block elements, their containing div starts acting like it's a block element too. I want the buttons to be block elements 开发者_C百科relative to each other, but I want the button panel to flow inline with the selects. I suspect there's something important I don't understand here. Help?
Block-level elements are not allowed within inline elements
Usually one would float the three boxes one after the other keeping them blocks
div.clientsBox {
float: left;
}
div#clientButtons {
float: left;
width: 15%;
}
I was able to accomplish the desired look with the following code. Not sure if you were trying to stay away from floats or what not, but this does work
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='>' /><br />
<input type='button' id='removeButton' value='<' />
</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>
<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>
There is a CSS property display: inline-block, but is is not supported by all browsers.
With this slightly updated code
<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>
You can use this valid CSS to show what you want
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; }
加载中,请稍侯......
精彩评论