jquery mobile -5 个连续按钮

Question

谁能告诉我在 JQuery Mobile 中如何使按钮的大小适合屏幕分辨率，我的意思是，如果我在 Galaxy S2 中有 5 个按钮，我会在 1 行中看到它。但如果我使用其他屏幕较小的手机，它就会分布在两行上。

如何让按钮保持在 1 行？ (并减小按钮/文本大小)在所有屏幕中？ 我尝试这样做:

.ui-button{高度: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 中，设置为以 float: left 内联方式显示，宽度为 20%(一行 5 个)。在我的示例中，当屏幕宽度小于 480 像素时，使用媒体查询来减小字体大小；您可以根据自己的喜好进行调整或选择不考虑字体大小。

<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 }
}