如何使所有按钮的高度相同?

问题描述

span的这些按钮我希望所有人都拥有相同的高度

These button made by span I want same height for all

如何获得?在此处使用jsfiddle示例进行游戏 http://jsfiddle.net/jitendravyas/Apz9e/16/

How to get that? play with jsfiddle example here 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
    }

推荐答案

显然是因为您为select中的填充提供了百分比宽度.基本上，当您这样做时，将根据内容的宽度设置填充.假设您的宽度为100px，那么根据您的情况，填充为7px.或者，当它为1000px时将为70px.尝试给select.select元素提供固定的填充，而不要使用百分比.那将解决您的问题.

Apparently it's because you provided a percentage width for the padding in select. Basically, when you do so the padding will be set according to the width of the content. Say your width is 100px then the padding will be 7px in your case. Or when it is 1000px it will be 70px. Try to give a fixed padding to the select.select element instead of using percentage. That will solve your question.

类似地，如果您真的要使用百分比填充，请设置固定宽度.也可以.

Similarly, if you really going to use a percentage padding, then set a fixed width. It would work as well.

**编辑**

以下是解决问题的简单方法.

The following is a simple workaround for your problem.

// 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);
});

这篇关于如何使所有按钮的高度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！