Question

任何人都可以在 JQuery Mobile 中告诉我如何根据屏幕分辨率调整按钮的大小，我的意思是如果我在Galaxy S2中有5个按钮，我会在一行中看到它。但如果我使用其他一些屏幕较小的手机，它会分布在2排。

如何让按钮保持在一排？（并减少按钮/文字大小）在所有屏幕中？我试着这样做：

.ui-button{height:10%}

但它不起作用！有任何想法吗？谢谢:)）

<div class="center-wrapper" style="margin-bottom:10px float:left ">
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 6 <a/>   
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 7 <a/>
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 8 <a/>
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 9 <a/>
      <a class="b" data-role="button" data-inline="true" style="margin: 1px;"> 10 <a/>    
</div>

Answer 1

这样的事情： DEMO FIDDLE

每个按钮都包含在DIV集中，以嵌入方式显示浮动：左侧和宽度20％（连续5个）。在我的示例中，当屏幕宽度小于480px时，使用媒体查询来减小字体大小;你可以调整品味或选择单独保留字体大小。

<div data-role="content">
    <div id="fiveButtons" class="center-wrapper" style="margin-bottom:10px float:left "> 
        <div class="b"><a class="c"  data-role="button" data-inline="true" style="margin: 1px;" > 6 </a> </div>  
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 7 </a></div>
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 8 </a></div>
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 9 </a></div>
        <div class="b"><a class="c" data-role="button" data-inline="true" style="margin: 1px;" > 10 </a></div>    
</div>        


#fiveButtons .b{
    display: inline;
    float: left;
    width: 20%;
}
#fiveButtons .c{
    width: 92%;
}
#fiveButtons  .ui-btn-inner {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
@media all and (max-width: 480px){
     #fiveButtons  .ui-btn-inner { font-size: 12px }
}

jquery移动-5按钮连续

1 个答案: