Javascript Jquery移动中心和使用3个按钮的全屏幕宽度

我试图得到3个按钮，以使用全屏幕宽度和重新大小，如果需要的话。然而，当我尝试使用我的代码时，它不会居中。尝试使用边距左边距右自动按钮，但似乎我无法让它工作

HTML如下所示：

<div id="overview-content">
<div id="navgroup" data-role="controlgroup" data-type="horizontal">
    <button class="ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-star">Aktivitet</button>
    <button class="ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-home">Grupp</button>
    <button class="ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-mail">Meddelande</button>
</div>

---

要使按钮居中，您需要使它们成为块级元素，然后为它们提供一个响应宽度，您需要为按钮提供一个宽度百分比-见下文：

button {
display: block;
margin: 0 auto;
text-align: center;
width: 80%;
}

---

尝试将CSS更改为

#navgroup {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
}
.ui-controlgroup-controls {
    width: 500px;
    max-width: 100%;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn, .ui-controlgroup-controls .ui-btn-icon-notext {
    box-sizing: border-box;
    width: 33.33%;
}

这里有一个

---

边框框规则确保在调整大小时，边框和填充包含在元素宽度中。因此，每个按钮占ui控件组控件容器的三分之一，并且该容器具有一个设置的宽度。当屏幕宽度大于设置的宽度时，它由文本对齐：居中规则居中，当屏幕较窄时，最大宽度规则将其保留在页面内。

您在哪里使用“ui controlgroup controls”CSS类？它是由jquery mobile在初始化期间自动添加的。由于某些原因，它不会应用于按钮，我想我试过了，但是用了内联块。问题是，我希望这3个按钮始终占据整个屏幕空间。除非您希望它们并排使用，否则您不会希望使用内联块。查看我在这里添加的CSS：我希望它们与一个控制组并排，我尝试使用来自JQM的3块网格，通过使用JQM的网格布局使其工作，但我仍然不知道如何将其与控制组一起使用

#navgroup {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
}
.ui-controlgroup-controls {
    width: 500px;
    max-width: 100%;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn, .ui-controlgroup-controls .ui-btn-icon-notext {
    box-sizing: border-box;
    width: 33.33%;
}