带有jquery mobile的全宽水平按钮？

Posted 2023-05-09

【中文标题】带有jquery mobile的全宽水平按钮？

【英文标题】：Full width horizontal buttons with jquery mobile?

【发布时间】：2011-04-29 03:26:43

【问题描述】：

在Jquery mobile 中，我可以将水平按钮分组，但它们的组不会占用 100% 的宽度。

我尝试添加一个设置 width:100% 的类，但没有奏效。

我该怎么做？

谢谢！

更新 + 可能的修复：它似乎失败了，因为我在两个按钮中都明确使用了width="50%"。我做了45% 和合适的。按钮可能有一些边距？

应用了修复的源代码：http://pastebin.com/ZXDNfAU1

【问题讨论】：

已添加，对此感到抱歉。它实际上是文档中大部分复制粘贴的代码。

“导航栏”工具栏是必经之路。有another thread 用代码示例讨论这个问题。

【参考方案1】：

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

如果它不在页脚或页眉元素中，上面将执行此操作。这里有两个柱网： http://view.jquerymobile.com/master/demos/grids-buttons/

我不知道如何在页脚中完成它

【参考方案2】：

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

我从文档中得到了上面的代码： http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/buttons/buttons-grouped.html

我自己试过了，效果很好。您会得到 2 个并排的按钮，它们会展开以填充 100% 的屏幕。

【讨论】：

在 iPhone 上查看时在最新的测试版中对我不起作用

如何获得组按钮的全屏宽度

【参考方案3】：

<div class="ui-grid-solo">
    <div class="ui-block-a">
         <input type="submit" name="Action" value="Register" data-theme="b"/>
    </div>
</div

这行得通

【参考方案4】：

用萤火虫检查它，看看是什么导致它们显示不好。

并将data-type="horizontal" 添加到源代码中的控制组 div。

【参考方案5】：

如果你想要水平2按钮可能是你可以使用

<div style="float:left; " >  
<div style="float:right;" >