CSS：我怎样才能使fieldset和多个选择框的高度相同？

我有一个表单与一个fieldset和多个选择框并排。我希望多选框与fieldset的高度相同。我宁愿不必诉诸于JavaScript。任何帮助将不胜感激。CSS：我怎样才能使fieldset和多个选择框的高度相同？

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

来源

2011-04-19 Paul

-1

字段集，选择 { 高度：200像素; }

来源

2011-04-19 19:46:52 BentOnCoding

你实际测试的代码？没有冒犯，但它使页面看起来超级贫民窟。即使它在我的电脑上看起来不错，但并不能保证它在别人身上看起来不错。我正在寻找更优雅的东西。尽管感谢你的时间。 – Paul 2011-04-19 19:55:20

你问了一个问题，我给了一个答案。我不是为了让你的页面看起来漂亮。是的，我在jsfiddle中测试了代码，它看起来像两个项目是相同的高度...有一个愉快的一天 – BentOnCoding 2011-04-19 20:22:09

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

我不确定如何制作它，因此选项不会滚动，并且每个字段可排列两个选项。

但是，在这里我回答你的问题，因为你[原]表示。如果您调整页面上的文本大小，选择框会保持相同的相对高度，这比以前的答案稍微优雅一些。

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/

来源

2011-04-19 21:07:28 kjl

CSS：我怎样才能使fieldset和多个选择框的高度相同？

回答

相关问题