html - 在jquery mobile页脚中将元素对齐到中心

Question

我很难在 jQuery Mobile 页面的页脚内对齐元素。
我们要显示三种不同的信息：版权、版本号和连接状态。目标是对齐页脚，使 COPYRIGHT 左对齐，VERSION NUMBER 居中，CONNECTION STATUS 右对齐，都在同一页脚行上。

我尝试了以下方法，但不幸的是，它不起作用：

<div data-role="footer">
<span style="text-align:left">COPYRIGHT</span>
<span style="text-align:center">VERSION NUMBER</span>
<span style="text-align:right">CONNECTION STATUS</span>
</div>

任何建议如何完成此对齐设置？非常感谢！

Answer 1

您应该像这样使用 jQuery Mobile 网格：

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            <div class="ui-grid-b">
                <div class="ui-block-a" style="text-align: left;">COPYRIGHT</div>
                <div class="ui-block-b" style="text-align: center;">VERSION NUMBER</div>
                <div class="ui-block-c" style="text-align: right;">CONNECTION STATUS</div>                
            </div><!-- /grid-a -->
        </h3>                
    </div>

这是一个工作示例：http: //jsfiddle.net/Gajotres/e2uaU/

并根据需要设置样式。一切都应该被包裹在 h3 标签中，这样页脚就可以保持它的高度。