如何自适应刷选菜单

  用户的需求总是无限的，这边要把table-cell的方式去掉用，float：left来自动适应能够显示的筛选选项

        #filterMenuOnsale {
            /*height: 148px;*/
            /*height: 193px;*/ /*不设置高度，让其根据筛选条件数量自适应*/
            border-top: solid 1px #CFCED3;
            border-bottom: solid 1px #CFCED3;
            box-sizing: border-box;
            margin: 0 auto;
            padding: 0 24px;
          
            overflow: hidden;
            /*position: fixed;*/
            /*position:static;*/
            position: absolute;
            z-index:1000;
            width: 10rem;
            background-color: #FFF;
            display: none;
            /*border-bottom:solid 1px  #CFCED3;*/
        }


        #filterMenuWillpublish {
            /*height: 148px;*/
            /*height: 193px;*/ /*不设置高度，让其根据筛选条件数量自适应*/
            border-top: solid 1px #CFCED3;
            border-bottom: solid 1px #CFCED3;
            box-sizing: border-box;
            margin: 0 auto;
            padding: 0 24px;
               
            overflow: hidden;
            /*position: fixed;*/
            /*position: static;*/
            position: absolute;
             z-index:1001;
            width: 10rem;
            background-color: #FFF;
            display: none;
            /*border-bottom:solid 1px  #CFCED3;*/
        }


        .content {
            display: table;
            width: 100%;
            /*padding:20px 0;*/
            /*padding: 1.25rem 0.109375rem;*/
        }

        .filter {
            display: table-cell;
            width: 33.33%;
            box-sizing: border-box;
            text-align: center;
            vertical-align: middle;
        }

        /*.Left {
            display: table-cell;
            
            text-align: center;
        }

        .Middle {
            display: table-cell;
       
            text-align: center;
            vertical-align: top;
            padding: 0 15px;
           
        }

        .Right {
            display: table-cell;
           
            text-align: center;
            vertical-align: top;
        }*/

        .filterButton {
            width: 80px;
            height: 32px;
             

            border-radius: .2em;
            outline: solid 1px #CFCED3;
            display: block;
            vertical-align: middle;
            line-height: 2.0;
            margin: 13px 15px 13px 0px;
           
            font-family: STXihei;

     <span style="color:#ff0000;">           width: 28%;
    float: left;</span>
        }

   关键红色的float：left和width来定义好样式，html里面没有变化，把left和middle以及right的class去掉

   <div id="filterMenuOnsale">
            <div class="content">
                <div class="filter">
            <a id="all"   class="filterButton SwitchColor" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).all==0?"display:none":"display:block"%>"><span>全部(<span class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).all %></span>)</span></a>
                     <a id="hybridType" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).混合型==0?"display:none":"display:block"%>"><span>混合型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).混合型 %></span>)</span></a>
           <a id="QDIIType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).QDII==0?"display:none":"display:block"%>"><span>QDII(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).QDII %></span>)</span></a>
                      <a id="breakevenType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).保本型==0?"display:none":"display:block"%>"><span>保本型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).保本型 %></span>)</span></a>
 
                   
          
            <a id="stockType" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票型==0?"display:none":"display:block"%>"><span>股票型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票型 %></span>)</span></a>
                  <a id="bondType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券型 ==0?"display:none":"display:block"%>"><span>债券型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券型 %></span>)</span></a>
                               
                        <a id="CurrencyType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).货币型==0?"display:none":"display:block"%>"><span>货币型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).货币型 %></span>)</span></a>
                  <a id="setToOpen"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).定开债券 ==0?"display:none":"display:block"%>"><span>定开债券(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).定开债券 %></span>)</span></a>
                 
       
            <a id="stockIndexType" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票指数==0?"display:none":"display:block"%>"><span>股票指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).股票指数 %></span>)</span></a>
                  <a id="bondIndexType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券指数==0?"display:none":"display:block"%>"><span>债券指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).债券指数 %></span>)</span></a>
           
                  <a id="financingType" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).理财型==0?"display:none":"display:block"%>"><span>理财型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).理财型 %></span>)</span></a>
                 <a id="othersType"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).其他==0?"display:none":"display:block"%>"><span>其他(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(2).其他 %></span>)</span></a>
               
            </div>
                </div>
        </div>
        <!--即将发行筛选菜单-->
          <div id="filterMenuWillpublish">
            <div class="content">
                <div class="filter">
            <a id="all2"   class="filterButton SwitchColor" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).all==0?"display:none":"display:block"%>"><span>全部(<span class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).all %></span>)</span></a>
                     <a id="hybridType2" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).混合型==0?"display:none":"display:block"%>"><span>混合型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).混合型 %></span>)</span></a>
           <a id="QDIIType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).QDII==0?"display:none":"display:block"%>"><span>QDII(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).QDII %></span>)</span></a>
                      <a id="breakevenType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).保本型==0?"display:none":"display:block"%>"><span>保本型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).保本型 %></span>)</span></a>
 
                  
            <a id="stockType2" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票型==0?"display:none":"display:block"%>"><span>股票型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票型 %></span>)</span></a>
                  <a id="bondType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券型 ==0?"display:none":"display:block"%>"><span>债券型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券型 %></span>)</span></a>
                               
                        <a id="CurrencyType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).货币型==0?"display:none":"display:block"%>"><span>货币型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).货币型 %></span>)</span></a>
                  <a id="setToOpen2"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).定开债券 ==0?"display:none":"display:block"%>"><span>定开债券(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).定开债券 %></span>)</span></a>
                 
         
            <a id="stockIndexType2" class="filterButton " style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票指数==0?"display:none":"display:block"%>"><span>股票指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).股票指数 %></span>)</span></a>
                  <a id="bondIndexType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券指数==0?"display:none":"display:block"%>"><span>债券指数(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).债券指数 %></span>)</span></a>
           
                  <a id="financingType2" class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).理财型==0?"display:none":"display:block"%>"><span>理财型(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).理财型 %></span>)</span></a>
                 <a id="othersType2"  class="filterButton" style="<%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).其他==0?"display:none":"display:block"%>"><span>其他(<span  class="filterButtonNumber"><%=ZTForMobileCommon.DataBiz.Instance().GetDataCount(1).其他 %></span>)</span></a>
               
            </div>
                </div>
        </div>

最后jquery要下去掉右边界的margin的操作：

  $("#filterMenuOnsale").each(function () {

            
                var i;
                var number = 1;
                for( i=0;i<12;i++)
                {
                    
                    if ($(this).find("a").eq(i).attr("style").indexOf("block") != (-1)) {
                    if(number%3==0)
                        $(this).find("a").eq(i).css("margin", "13px 0px 13px 0px");
                    number++;
                    }
             
                }
            });

            $("#filterMenuWillpublish").each(function () {


                var i;
                var number = 1;
                for (i = 0; i < 12; i++) {

                    if ($(this).find("a").eq(i).attr("style").indexOf("block") != (-1)) {
                        if (number % 3 == 0)
                            $(this).find("a").eq(i).css("margin", "13px 0px 13px 0px");
                        number++;
                    }
                    
                 
                }
            
            });