CSS: how can I make a fieldset and multiple selection box the same height?
I have a form with a fieldset and multiple selection box side by side. I would like the multiple selection box to be the same height as the fieldset. I would prefer to not have to resort to JavaScript. Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Height Test</title>
<style type="text/css">
fieldset {
width: 20em;
float: left;
}
select {
float: left;
}
</style>
</head>
<body>
<fieldset>
<legend></legend>
<ol>
<li><label for="Field1">Field 1</label><input id="Field1"></li>
<li><label for="Field2">Field 2</label><input id="Field2"></li>
<li><label for="Field3">Field 3</label><input id="Field3"></li>
<li><label for="Field4">Field 4</label><input id="Field4"></li>
<li><label for="Field5">Field 5</label><input id="Field5"></li>
<li><label for="Field6">Field 6</label><input id="Field6"></li>
<li><label for="Field7">Field 7</label><input id="Field7"></li>
<li><label for="Field8">Field 8</label><input id="Field8"></li>
<li><label for="Field9">Field 9</label><input id="Field9"></li>
<li><label for="Field10">Field 10</label><input id="Field10"></li>
</ol>
</fieldset>
<select multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<开发者_StackOverflow;option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
</select>
</body>
</html>
Based on your question, I'm not sure if your intent is make it so the select box is scrollable or not.
I'm not sure how to make it so the options don't scroll and line up to two options per field.
However, here my answer to your question as you [originally] stated. This is a bit more elegant than the previous answer as the select box keeps the same relative height if you resize the text on the page.
li {
height:2em;
padding:0px;
font-size:1em;
line-height:2em;
vertical-align:middle;
}
select {
height:20em;
font-size:1em;
}
Note that if this isn't exactly what you want, you can also style the option element if it helps:
option {
padding:0;
margin:0;
}
http://jsfiddle.net/xsPr6/1/
fieldset, select { height: 200px; }
加载中,请稍侯......
精彩评论