jQuery mobile：頁面按鈕的位置

我有以下標記（以及下面顯示的結果顯示）。jQuery mobile：頁面按鈕的位置

我希望Prev和Next按鈕分別放在靠近左側（如現在）和右側邊緣的位置。

中間按鈕（這可能會更改爲文本）在中間。

我嘗試了幾乎所有常用的技術，如text-align:rightright: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>

enter image description here

這裏你可以看到一個活生生的例子：http://www.jsfiddle.net/yyshf

來源

2012-08-16 siva636

你有一個活生生的例子地方？ – Kyle 2012-08-16 07:40:55

對不起，這項工作仍在我的本地主機中。:-) – siva636 2012-08-16 07:43:46

如果我明白你的意思，你可以靜靜地飄浮在錨和保證金添加到最右邊的兩個錨：

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

li.list-divider a 
{ 
    float left; 
} 

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

請記住，使用jQuery手機CSS，您必須將CSS添加到底部。您可能還需要向這些錨點添加類以更具體地選擇它們，否則可能會在您的移動網站中混淆其他內容。

來源

2012-08-16 07:56:29 Kyle

但是在輸出中，按鈕（錨點）沒有出現在同一級別？ – siva636 2012-08-16 09:03:13

在我的例子中，他們是不是在你的實際項目？ – Kyle 2012-08-16 09:07:03

我更喜歡左邊的第一個按鈕，右邊的第二個按鈕，右邊的第二個按鈕，都在同一個水平上 - DUKE剛剛編輯 – siva636 2012-08-16 09:25:42

您應該添加到<li data-role="list-divider">（其中包含的按鈕上），以下樣式：text-align: right;

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

來源

2012-08-16 09:09:24 bodi0

但它技術將所有3個按鈕移到右邊。（我更喜歡左邊的第一個按鈕，右邊的第二個和第三個按鈕） – siva636 2012-08-16 09:24:47

jQuery mobile：頁面按鈕的位置

回答

相關問題