javascript 如何让 jquery 移动控制组宽度为 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10929226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to let jquery mobile controlgroup width 100%?
提问by RogerWu
i'm useing jquery mobile to do a demo... i want to let the width of localnav be 100%... but i don't know how to do that... code here...
我正在使用 jquery mobile 来做一个演示......我想让 localnav 的宽度为 100%......但我不知道该怎么做......代码在这里......
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="#" data-role="button" data-transition="fade" class="ui-btn-active">111</a></li>
<li><a href="#" data-role="button" data-transition="fade">222</a></li>
<li><a href="#" data-role="button" data-transition="fade">333</a></li>
</ul>
help me pls...thank you...
请帮帮我...谢谢...
回答by Kyle Duncan
Take a look at JQuery Mobile's navbarThough it's normally used in a header/footer, it can be used elsewhere. It will produce a full-width bar containing your buttons.
看一看JQuery Mobile 的导航栏虽然它通常用于页眉/页脚，但它也可以用于其他地方。它将生成一个包含您的按钮的全宽栏。
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus" data-role="button">Button1</a></li>
<li><a href="#" data-icon="minus" data-role="button">Button2</a></li>
<li><a href="#" data-icon="check" data-role="button">Button3</a></li>
</ul>
</div>
回答by joey_g216
Here's what I did. Worked well.
这就是我所做的。工作得很好。
CSS:
CSS：
<style>
.ui-grid-a, .ui-grid-a .ui-controlgroup-controls {width: 100%}
#homePageButton {width:49%;float:left;margin-left:1%}
#logOutButton {width:49%}
#footer {height:45px}
</style>
HTML:
HTML：
<div data-role="footer" data-position="fixed" id="footer">
<div data-role="controlgroup" data-type="horizontal" class="ui-grid-a">
<a href="#" data-role="button" data-icon="home" id="homePageButton">Home Page</a>
<a href="#" data-role="button" data-icon="forward" data-iconpos="right" id="logOutButton">Log Out</a>
</div>
</div>
Result:
结果：
回答by Nirmal Patel
Not sure why you are trying to wrap a <ul>as a controlgroup. But you can have a full-width ControlGroup with the following approach:
不知道您为什么要尝试将 a 包装<ul>为控制组。但是您可以使用以下方法获得全宽 ControlGroup：
<div data-role="controlgroup" data-type="horizontal" class="localnav">
<a href="#" data-role="button" data-transition="fade" class="ui-btn-active">111</a>
<a href="#" data-role="button" data-transition="fade">222</a>
<a href="#" data-role="button" data-transition="fade">333</a>
</div>
And in CSS, split the width equally among the number of <a>elements:
在 CSS 中，在<a>元素数量之间平均分配宽度：
a{width:33%;}
Sample jsfiddle: http://jsfiddle.net/pAuqm/1/
示例 jsfiddle：http: //jsfiddle.net/pAuqm/1/
If you want to continue with <ul>based structure; you could have full width controlgroup with following CSS:
如果您想继续使用<ul>基于结构的结构；您可以使用以下 CSS 设置全宽控制组：
li{
display: inline;
}
a{width:33%;}
Sample jsfiddle: http://jsfiddle.net/pAuqm/3/
示例jsfiddle：http: //jsfiddle.net/pAuqm/3/
回答by bazzargh
I'm using a grid to do this, and one extra css rule:
我正在使用网格来做到这一点，还有一个额外的 css 规则：
.ui-controlgroup-horizontal > div > .ui-btn {
width: 99%
}?????????
The reason I'm doing this is that the markup like this:
我这样做的原因是这样的标记：
<div class="ui-grid-a" data-role="controlgroup" data-type="horizontal">
<div class="ui-block-a">
<button type="submit" data-theme="c">Cancel</button>
</div>
<!-- etc -->
</div>
Is transformed by jquery into markup like this (inspect it in Chrome or Firebug):
被 jquery 转换成这样的标记（在 Chrome 或 Firebug 中检查它）：
<div class="ui-grid-a ui-corner-all
ui-controlgroup ui-controlgroup-horizontal"
data-role="controlgroup" data-type="horizontal">
<div class="ui-block-a">
<div data-corners="true" data-shadow="true"
data-iconshadow="true" data-inline="null"
data-wrapperels="span" data-icon="null" data-iconpos="null"
data-theme="c" data-mini="false"
class="ui-btn ui-btn-up-c ui-corner-left"
aria-disabled="false">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Cancel</span>
</span>
<button type="submit" data-theme="c" class="ui-btn-hidden" aria-disabled="false">Cancel</button>
</div>
</div>
<!-- etc -->
</div>
As you can see, the .ui-btnwe want to be 100% wide is inside ui-block-a(or ui-block-b, ui-block-c, etc.), and our horizontal control group has gained the class .ui-controlgroup-horizontal, hence the rule: .ui-btnchildren of divschildren of .ui-controlgroup-horizontalare made (nearly) 100%. I stop short of 100% because this chops the rounded corners on the right hand button for me. By using .ui-controlgroup-horizontalon the top class, and not (say) ui-grid-a, this rule works for different grid sizes.
正如您所看到的，.ui-btn我们想要 100% 宽的是里面ui-block-a（或ui-block-b,ui-block-c等），我们的水平控制组获得了 class .ui-controlgroup-horizontal，因此规则： 的.ui-btn孩子的divs孩子.ui-controlgroup-horizontal（几乎）是 100%。我没有达到 100%，因为这会为我切掉右侧按钮上的圆角。通过.ui-controlgroup-horizontal在顶级而不是（比如说）上使用ui-grid-a，此规则适用于不同的网格大小。
