如何为所有按钮获得相同的高度？

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

显然这是因为你在select中提供了填充的百分比宽度。基本上，当您这样做时，将根据内容的宽度设置填充。假设您的宽度为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);
});