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

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 标签中，以便页脚可以保持其高度。