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

Question

我使用jquery mobile并且我有一个控件组，它的呈现方式如下：

但是，如果您继续浏览此页http://jquerymobile.com/demos/1.0.1/docs/forms/textinputs/index.html，请在顶部看到如下控件组;

我还在试图了解jquery如何使其控件组的大小变小？

Answer 1

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

• http://jquerymobile.com/demos/1.0.1/docs/_assets/css/jqm-docs.css

将课程放在<ul>元素

上

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

并添加此CSS

.localnav {
    margin:0 0 20px 0;
    overflow:hidden;
}
.localnav li {
    float:left;
}
.localnav .ui-btn-inner { 
    padding: .6em 10px; 
    font-size:80%; 
}

应该得到你想要的结果，但它确实设置了它的字体大小

Answer 2

在控制组中，您可以像这样添加 data-mini =“true”：

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

Answer 3

我要做的是将按钮包装在像这样的容器中：

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

让我知道这是否有效，因为我无法在此测试。干杯！

Answer 4

如果你使用firebug挖掘代码，那么你可以知道ul的孩子是这样的ul＆gt; li> a＆gt; span＆gt; span 。在最终的span标签中，您将获得如下css。

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

如果将字体大小更改为％或px，则可以获得所需的大小。 我认为以下事情将起作用

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

我没有做过任何例子..如果它不适合你请忽略它