Jquery 移动：水平按钮，填充容器

Question

我正在开发一个移动应用程序，我正在尝试创建两个按钮，它们应该会增长并填满它们的容器。

所以在纵向视图中，这两个按钮应该占满它们父级的整个宽度，而在横向视图中，它们也应该增长以填满它们的整个父级。

我曾尝试使用网格，根据我遇到的 post 中的建议，但这似乎无法完成工作...

按钮不会增长并填满它们的父级。

<div class="ui-grid-a">
 <div class="ui-block-a">
  <a href="tel:xxxx" class="ui-btn ui-icon-phone ui-btn-icon-left ui-btn-inline">xxxx</a>
 </div>
 <div class="ui-block-b">
  <a href="test" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-btn-inline">More</a>
 </div>
</div>

P.S。没有网格布局的单个按钮增长以正确填充其父容器。

<a href="tel:xxxx" class="ui-btn ui-icon-phone ui-btn-icon-left">xxxx</a>

好像是ui-btn-inline不长的原因

Answer 1

只需删除 ui-btn-inline class。

如果您不希望按钮填充容器，那么class就是这样。 class 消失后，网格解决方案将起作用。

DEMO

Jquery 移动：水平按钮，填充容器

Jquery Mobile: Horizontal Buttons, fill container

javascript

mobile

jquery

jquery-ui

jquery-mobile