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

私があなたの意味を理解しているなら、あなたはただアンカーを浮かせて、2つの右端のアンカーにマージンを加えることができます：

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 に答える