Question

我很难在jQuery Mobile Page的页脚内部对齐元素我们有三种不同的信息要显示：版权，版本号和连接状态。目标是以这样的方式对齐页脚，使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标签包裹，以便页脚可以保持其高度。

将元素对齐到jquery移动页脚的中心

1 个答案: