0

我有以下标记（以及下面显示的结果显示）。

我希望Prev和Next按钮分别放置在靠近底部列表分隔线的左侧（就像现在一样）和右侧边缘。

中间按钮（这可以更改为文本）位于中间。

我尝试了几乎所有常用的技术，例如text-align:right right:5px等，但没有成功。

任何人都可以通过CSS向我推荐一种可靠的跨浏览器方式吗？

 <ul data-role="listview" data-inset="true">
                <li data-role="list-divider"> Cars</li>
                <li><a href="acura.html">Acura</a></li>
                <li><a href="audi.html">Audi</a></li>
                <li><a href="bmw.html">BMW</a></li>
                <li data-role="list-divider">

                    <a href="index.html" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l">Prev</a>
                    <a href="index.html" data-role="button" data-inline="true" data-mini="true">1 of 2</a>
                    <a href="index.html" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a>

                </li>
            </ul>

在此处输入图像描述

你可以在这里看到一个活生生的例子：http: //www.jsfiddle.net/yyshf

4

2 回答 2

1

如果我明白你的意思，你可以浮动锚点并为最右边的两个锚点添加边距：

http://jsfiddle.net/yyshf/1/

li.list-divider a
{
    float left;
}

li.list-divider a + a
{
    margin-left: 33%;
}
​

请记住，使用 jQuery 移动 CSS 您必须将 CSS 添加到底部。您可能还必须向这些锚点添加类以更具体地选择它们，否则它可能会在您的移动站点中弄乱其他东西。

于 2012-08-16T07:56:29.747 回答
1

您应该将<li data-role="list-divider"以下样式添加到 > （包含按钮跨度）：text-align: right;

见http://jsfiddle.net/wF5qa/1/

于 2012-08-16T09:09:24.383 回答