宽度100%的按钮在div内部

Question

我是一名有用的助手，可以为您翻译文本。以下是需要翻译的内容：

我正在制作一个 Phonegap 应用程序，使用的是 HTML、CSS 和 jQuery Mobile 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>

我将尝试为父级div设置宽度100％，并为.ui-controlgroup-controls设置宽度：auto，但它并不适合所有宽度。

实际的CSS：

.ui-controlgroup {
width: 100% !important;
}
.ui-controlgroup, fieldset.ui-controlgroup {
padding: 0;
margin: .5em 0;

并且

.ui-controlgroup-horizontal .ui-controlgroup-controls {
display: inline-block;
vertical-align: middle;
}
.ui-controlgroup-controls {
width: inherit !important;
}

我希望将这个宽度设置为百分比，以便在小型智能手机上具有响应性。

谢谢！

- Ty Yt

---

你是否在 .ui-controlgroup-controls 中添加了宽度为 100% 的内联 CSS？ - aldrien.h

请展示一下你的 CSS。 - jono

我将 .ui-controlgroup 的宽度设置为100％，并将 .ui-controlgroup-controls 的宽度设置为自动。 - Ty Yt

你在使用Bootstrap吗？ - Jose Rocha

不，只有jQuery Mobile。 - Ty Yt

jQuery Mobile网格系统 - Jose Rocha

Answer 1

请查看Jquery移动网格系统。由于您已经在使用jQuery Mobile，这将形成一个漂亮的居中3按钮。要使ui-controlgroup-controls全宽，请使用此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>

终于有一个Plunker了。

编辑 如果你只想将此应用于controlgroup-horizontal。

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

否则，您可以编写自己的规则并将其应用于标记类。

- Jose Rocha

---

很高兴我能帮到你。 :) - Jose Rocha

Answer 2

width: auto会根据文本宽度调整div的宽度。如果您想使所有内容都是满宽度，请将父元素设置为width: 100%，并将元素（和其子元素？）设置为width: 100%或width: inherit。

- Ted Noelker

---

谢谢，我尝试过了（参见编辑后的帖子），但它不起作用。 - Ty Yt

你能更具体地说明你想要实现什么或者它有什么问题吗？ - Ted Noelker

Answer 3

父元素是<div>，它的默认属性是display: block;，因此自动为100％宽度。但是标签<a>的默认属性是display: inline;。

您只需将标签<a>设置为display: inline-block;，并告诉它们占据33％的宽度。

重要提示：显示为inline-block;的元素之间不应有空格或换行符，否则会出现像单词之间一样的小间隔。

.ui-controlgroup {
width: 100% !important;
}
.ui-controlgroup, fieldset.ui-controlgroup {
padding: 0;
margin: .5em 0;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls {
display: inline-block;
vertical-align: middle;
}
.ui-controlgroup-controls {
  width: inherit !important;
  text-align: center;
}

.ui-btn-transparent {
  display: inline-block;
  width: 33%;
  
  text-align: center;
  background: red;
  outline: 1px solid;
}

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

- Juris Pukitis

---

谢谢你的解释。我不想把它们叠加在一起，而是将它们放在一起。 - Ty Yt

它也可以工作，但我会像Jose Rocha说的那样使用jQuery移动网格系统。谢谢！ - Ty Yt

Answer 4

替换：

100%;

to:

100vh;

我希望它能够运行。

- Joost de Niet