带有 jquery mobile 的全宽水平按钮?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3996705/
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
Full width horizontal buttons with jquery mobile?
提问by johnjohn
In Jquery mobile
, I can have grouped horizontal buttons, but they the group does not take 100% width.
在 中Jquery mobile
,我可以对水平按钮进行分组,但它们的组不占用 100% 的宽度。
I tried adding a class that sets width:100%
but that did not work.
我尝试添加一个设置width:100%
但不起作用的类。
How can I do it?
我该怎么做?
Thank you!
谢谢!
Update + Possible Fix: It seems that it was failing because I was explicitly using width="50%"
in both buttons. I did 45%
and the fit. Probably some margins that the buttons have?
更新 + 可能的修复:它似乎失败了,因为我width="50%"
在两个按钮中都明确使用了它。我做到了45%
,而且很合身。按钮可能有一些边距?
Source code with the fix applied: http://pastebin.com/ZXDNfAU1
应用了修复的源代码: http://pastebin.com/ZXDNfAU1
回答by kinet
<div class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</div>
Above will do it if it's not in a footer or header element. Two column grids are here: http://view.jquerymobile.com/master/demos/grids-buttons/
如果它不在页脚或页眉元素中,上面会这样做。两列网格在这里:http: //view.jquerymobile.com/master/demos/grids-buttons/
I do not know how to accomplish it within the footer
我不知道如何在页脚中完成它
回答by fab9
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
</div>
I got code above from the documentation: http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/buttons/buttons-grouped.html
我从文档中得到了上面的代码:http: //jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/buttons/buttons-grouped.html
I tried it myself and it works perfectly. You get 2 buttons side by side that expand to fill 100% of the screen.
我自己试过了,效果很好。你会得到 2 个并排的按钮,这些按钮可以扩展到 100% 的屏幕。
回答by Eudy Sekgota
<div class="ui-grid-solo">
<div class="ui-block-a">
<input type="submit" name="Action" value="Register" data-theme="b"/>
</div>
</div
This works
这有效
回答by busetekin
If you want horizontal 2 button may be you can use
如果你想要水平 2 按钮可能是你可以使用
<div style="float:left; " >
<div style="float:right;" >
回答by naugtur
Inspect it with firebug to see what is causing them to display badly.
用萤火虫检查它,看看是什么导致它们显示不佳。
And add data-type="horizontal"
to the controlgroup div in your sources.
并添加data-type="horizontal"
到源中的控制组 div。