Css 如何控制Jquery移动控制组的大小？

我正在使用jquery mobile，我有一个控制组，其呈现方式如下：

<div class="buttonsHere">
   <button class="myButton" id="search">Search</button>
   <button class="myButton" id="latest">Latest</button>
   <button class="myButton" id="top">Top</button>
</div>

.buttonsHere.ui-btn-text {
    font-size: 20px;    
}

<div data-role="controlgroup" data-type="horizontal" data-mini="true"> 

然而，如果你进入这一页，你会在顶部看到一个控制组，如下所示

---

我仍在尝试了解jquery如何使其控制组变小？

我要做的是将按钮包装在一个容器中，如下所示：

<div class="buttonsHere">
   <button class="myButton" id="search">Search</button>
   <button class="myButton" id="latest">Latest</button>
   <button class="myButton" id="top">Top</button>
</div>

.buttonsHere.ui-btn-text {
    font-size: 20px;    
}

<div data-role="controlgroup" data-type="horizontal" data-mini="true"> 

---

让我知道这是否有效，因为我不能在这里测试它。干杯

在jQM演示中，他们添加了额外的CSS

将类放置在

元素上

class="localnav" 

例如：

<ul data-role="controlgroup" data-type="horizontal" class="localnav">
    <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
    <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
    <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
    <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>​

---

应该会得到你想要的结果，但是它确实设置了字体大小，如果你使用firebug挖掘代码，那么你就会知道ul的孩子们就是这样的ul>li>a>span>span。在最后一个span标记中，您将获得如下css

.localnav .ui-btn-inner {
font-size: 80%;
}

如果将字体大小更改为小于%或px，则可以获得所需的大小。 我认为下面的方法会奏效

$('ul li li a span span').css('font-size',60%');

---

我没有做过任何例子。。如果您在控制组中添加的数据mini=“true”不适用，请忽略此选项，如下所示：

<div class="buttonsHere">
   <button class="myButton" id="search">Search</button>
   <button class="myButton" id="latest">Latest</button>
   <button class="myButton" id="top">Top</button>
</div>

.buttonsHere.ui-btn-text {
    font-size: 20px;    
}

<div data-role="controlgroup" data-type="horizontal" data-mini="true">