如何讓所有按鈕的高度相同？

Question

這些按鈕由span做出我想要的所有

同一高度如何獲得呢？在這裏的jsfiddle例如玩http://jsfiddle.net/jitendravyas/Apz9e/16/

/* setting the width and height of the SELECT element to match the replacing graphics */ 
span.select, select.select { 

width:auto ; 
     height:auto ; 
    font:3.2em Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    padding:7% 7% 
} 


select.select{ 
     position:relative; 
     z-index:10; 

     line-height:1; 

} 

select option {padding-top:3px; border-bottom:1px solid red} 

/* dynamically created SPAN, placed below the SELECT */ 
span.select{ 
    position:absolute; 
    bottom:0; 
    float:left; 
    left:2px; 
    line-height:1; 
    text-indent:10px 
    background: #ffffff; 
background: url('images/color-arrow.png') no-repeat, -moz-linear-gradient(top, #ffffff 0%, #a9a9a9 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#a9a9a9)); 
background: -webkit-linear-gradient(top, #ffffff 0%,#a9a9a9 100%); 
background: linear-gradient(top, #ffffff 0%,#a9a9a9 100%); 
    cursor:default; 
    z-index:1; 
    border:#dadada 1px solid; 
    border-radius:6px;  
    background-position: 100% center; 
    text-shadow:0px 1px 1px #fff; white-space:nowrap; 
     diaplay:block 
    } 

Answer 1

顯然，這是因爲您選擇的填充提供了百分比寬度。基本上，當你這樣做時，填充將根據內容的寬度設置。說你的寬度是100px那麼你的情況下填充將是7px。或者當它是1000px時，它將是70px。嘗試給select.select元素提供固定的填充，而不是使用百分比。這將解決你的問題。

同樣，如果你真的要使用百分比填充，然後設置一個固定的寬度。它也會起作用。

**編輯**

以下是你的問題的簡單解決方法。

// on window resize 
$(window).resize(function() { 
    var max = 0; 
    // get the height of the longest select.select 
    $("select.select").each(function() { 
     var h = $(this).height(); 
     if (h > max) 
      max = h; 
    }); 
    // set the height of all select.select to max height 
    $("select.select").height(h); 
});