Question

我正在制作一个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>

我尝试在父级div和宽度设置宽度100％：自动到 .ui-controlgroup-controls 但它并不适合所有宽度。

实际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;
}

我想将此宽度设置为％，以便对小型智能手机做出响应。

谢谢！

Answer 1

查看Jquery mobile grid system.，因为您已经使用了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; }

或者您可以编写自己的规则并将其应用于标记类

Answer 2

width: auto将div的大小调整为文本的宽度。如果您希望所有内容都是全宽，请将父级设置为width: 100%，将元素（及其子级？）设置为width: 100%或width: inherit。

Answer 3

父元素为<div>，它自动为100％宽度，因为它的默认属性为display: block;，但标记<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>

Answer 4

替换：

100%;

为：

100vh;

我希望它有效

div内部宽度为100％的按钮

4 个答案: