CSS：如何使字段集和多个选择框具有相同的高度？

Question

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. 我宁愿不必诉诸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>
        <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>

Answer 1

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元素的样式（如果有帮助）：

option {
    padding:0;
    margin:0;
}

http://jsfiddle.net/xsPr6/1/ http://jsfiddle.net/xsPr6/1/

Answer 2

fieldset, select { height: 200px; 字段集，选择{高度：200像素； } }

CSS：如何使字段集和多个选择框具有相同的高度？

问题描述

2 个解决方案

解决方案1
0 2011-04-19 21:07:28

解决方案2
-1 2011-04-19 19:46:52

CSS：如何使字段集和多个选择框具有相同的高度？

问题描述

2 个解决方案

解决方案1 0 2011-04-19 21:07:28

解决方案2 -1 2011-04-19 19:46:52

解决方案1
0 2011-04-19 21:07:28

解决方案2
-1 2011-04-19 19:46:52