Html 宽度100%按钮在div内

我正在制作一个Phonegap应用程序，为此我使用html、css和jquery移动css框架。 我试着制作一个菜单，菜单上有3个按钮，它们相互粘在一起，居中。我希望它们占据整个父div宽度。 我试图设置一些属性，但不起作用

代码如下：

<div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
    <div class="ui-controlgroup-controls ">
        <a href="#" class="ui-btn ui-btn-transparent ui-first-child">1</a>
        <a href="#" class="ui-btn ui-btn-transparent">2</a>
        <a href="#" class="ui-btn ui-btn-transparent ui-last-child">3</a>
    </div>
</div>

及

我想将此宽度设置为%以便在小型智能手机上响应

谢谢

替换：

100%;

致：

---

我希望它能工作

width:auto

根据文本的宽度调整div的大小。如果希望所有内容都是全宽的，请将父元素设置为

宽度：100%

，将元素（及其子元素？）设置为

宽度：100%

或

宽度：继承

，父元素是

，它会自动设置为100%宽度，因为它的默认属性是

显示：块，但标签

签出，因为您已经在使用jQuery mobile，这将形成一个漂亮的中间3个按钮。对于ui控件组控件，请使用此css规则转到全宽

.ui-controlgroup-controls {
    display: inline !important;
    /* or you can choose to */
    /* display: block !important; */
    /* there are other options for display that work, not inline-block */
}

标记将如下所示。注意ui-grid-b和ui-block-a、ui-bloc-b和ui-block-c

 <div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
    <div class="ui-controlgroup-controls ui-grid-b">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-btn-transparent ui-first-child">1</a>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-btn-transparent">2</a>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-btn-transparent ui-last-child">3</a>
      </div>
    </div>

或者您可以编写自己的规则并将其应用于标记类
您是否将宽度100%添加到.ui控制组控件，内联css？请向我们展示您的css我是否将宽度100%添加到.ui控制组和宽度自动添加到.ui控制组控件是否使用引导？不，只有jquery mobileThanks，我尝试过这样做（cf编辑的帖子）但是它不起作用。你能更具体地说明你正在努力实现/没有实现的目标吗？谢谢你的解释。我不想把它们叠加在一起，而是把它们放在一起。这也行得通，但我会像Jose Rocha说的那样使用jquery移动网格系统。谢谢很高兴我能帮忙。：）
100vh;

.ui-controlgroup-controls {
    display: inline !important;
    /* or you can choose to */
    /* display: block !important; */
    /* there are other options for display that work, not inline-block */
}

 <div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
    <div class="ui-controlgroup-controls ui-grid-b">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-btn-transparent ui-first-child">1</a>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-btn-transparent">2</a>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-btn-transparent ui-last-child">3</a>
      </div>
    </div>

.ui-controlgroup-horizontal .ui-controlgroup-controls{
  display: inline !important;
}