Question

我有一个带有字段集和多个选择框的表单。我希望多选框与字段集的高度相同。我宁愿不必诉诸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>

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

Answer 2

fieldset，选择 { 身高：200px; }

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

2 个答案: