Question

我正在尝试在jQuery Mobile网格中对齐按钮图标。但似乎没有任何效果。目前，默认情况下，所有三个图标都保持对齐。我想将最左边的图标“右”，中心图标“中心”和最右边的图标“左”对齐。以下是我的基本标记：

<div data-role="header" data-position="fixed">
    <h1>Test Header</h1>
</div>
<div data-role="content" class="blink" class="ui-body" id="quotation_wrapper">              
    <div id="test_row">
        <div id="test_div">
            <p id="test_text"></p>
        </div>              
    </div>
    <div id="navigation_button_row">
        <div class="ui-grid-b" data-iconpos="centre">
            <div class="ui-block-a right"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-arrow-l">Previous</button></div>
            <div class="ui-block-b centre"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-recycle">Random</button></div>
            <div class="ui-block-c left"><button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-arrow-r">Next</button></div>
        </div>
    </div>
</div>

<div data-role="footer" data-position="fixed">
    <h4>Test Footer </h4>
</div>

data-iconpos="right"和data-iconpos="left"无效。以下CSS也没有：

.right {
    text-align: right;
}

.centre {
    text-align: centre;
}

.left{
    text-align: left;
}

我觉得这个问题的答案是非常基本的，但我仍然无法解决。以下是jsfiddle上的相同代码：http://jsfiddle.net/sharanankit18/ch51obog/1/

Answer 1

为display: inline-block;

添加.ui-grid-b button

.ui-grid-b button{
    display: inline-block;

}

示例http://jsfiddle.net/soledar10/o27dvfmo/

如何在jQuery Mobile网格中居中按钮图标

1 个答案: