带有 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:28:15  来源:igfitidea点击:

Full width horizontal buttons with jquery mobile?

jquerycssjquery-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。