jquery mobile中的垂直按钮对齐方式

Question

您好我正在使用移动应用。我希望这3个按钮垂直对齐，一个在另一个之下。会发生什么，一旦我将它们放入div（使用class =“footer”），按钮宽度大小会自动更改。

<div class="footer" data-role="footer" data-id="fixedFooter" data-position="fixed" style="display:none;" >
<div style="text-align:center; width:100%;">
  <input type="button" value="Button">
</div>
<div>
  <input type="button" value="submit">
</div>
<div>
  <input type="button" value="cancel">
</div>

Answer 1

你需要这样的东西：http://jsfiddle.net/Gajotres/a5USz/

HTML：

<div data-role="footer" data-position="fixed">
    <div class="button-holder">
        <input type="button" value="Button"/>
    </div>
    <div class="button-holder">
        <input type="button" value="submit"/>
    </div>
    <div class="button-holder">
        <input type="button" value="cancel"/>
    </div>
</div>

CSS：

.button-holder {
    text-align:center; 
    width:100%;   
}

.button-holder .ui-btn {
    width: 100% !important;
}

添加 margin：0 如果你想并排制作它们，就像这样：

.button-holder .ui-btn {
    width: 100% !important;
    margin: 0 !important;
}