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

【问题标题】：CSS: how can I make a fieldset and multiple selection box the same height?CSS：如何使字段集和多选框具有相同的高度？
【发布时间】：2011-05-21 06:59:09
【问题描述】：

我有一个并排的带有字段集和多选框的表单。我希望多选框与字段集的高度相同。我宁愿不必求助于 JavaScript。任何帮助将不胜感激。

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

【问题讨论】：

标签： html css height

【解决方案1】：

根据您的问题，我不确定您的意图是否是使选择框可滚动。

我不知道如何做到这一点，所以选项不会滚动并且每个字段最多排列两个选项。

但是，正如您 [最初] 所说，我在此回答您的问题。这比上一个答案更优雅一些，因为如果您调整页面上的文本大小，选择框会保持相同的相对高度。

li {
    height:2em;
    padding:0px;
    font-size:1em;
    line-height:2em;
    vertical-align:middle;
}

select {
    height:20em;
    font-size:1em;
}

请注意，如果这不是您想要的，如果有帮助，您还可以设置选项元素的样式：

option {
    padding:0;
    margin:0;
}

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

【讨论】：

【解决方案2】：

字段集，选择 { 高度：200px； }

【讨论】：

你真的测试过那个代码吗？没有冒犯，但它使页面看起来超级贫民区。即使它在我的电脑上看起来不错，也不能保证它在别人的电脑上看起来也不错。我正在寻找更优雅的东西。不过，感谢您的宝贵时间。
你问了一个问题，我给了一个答案。我不是来让你的页面看起来漂亮的。是的，我在 jsfiddle 中测试了该代码，看起来两个项目的高度相同......祝你有美好的一天