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和多個選擇框的高度相同？

回答

相關問題