jQuery Mobile的框架，HTML屬性或CSS屬性爲解決按鍵寬度

你好我正在開發一個jQuery移動網站，jQuery Mobile的框架，HTML屬性或CSS屬性爲解決按鍵寬度

我關於我的紅色按鈕呈現問題，似乎的寬度「首頁'和'產品'按鈕是由它們內部的文本決定的。這意味着一個按鈕看起來比另一個更薄。有沒有辦法將按鈕設置爲相等的一致寬度？我想在標題中實現一致的按鈕寬度。

也許我使用錯誤的HTML屬性的按鈕？

<div data-role="header" data-theme="c" class="mainNav"> 
       <a href="index.php" id="headerLogo" data-role="none"><span class="logo"></span></a> 
        <div class="ui-btn-right menuBtn"> 
         <a data-role="button" href="index.php" data-icon="home" data-iconpos="top">Home</a> 
         <a data-role="button" href="products.php" data-icon="settings" data-iconpos="top">Products</a> 
        </div> 
</div>

我的移動網站是在這裏： http://www.test-bed.co.uk/mobile/index.php

的jQuery移動按鈕的文檔是在這裏：

http://jquerymobile.com/demos/1.2.0-pre/docs/buttons/index.html

來源

2012-08-30 user1554264

你最好的選擇是編輯CSS主題你與JQuery Mobile一起使用，以便在所有頁面上獲得一致的按鈕大小。如果你不舒服這樣做，只是讓他們在同一類，並設置寬度在您提供的CSS頁面

class mobi-button { 
    display: inline-block; 
    width: 32px; 
    height: 46px; 
}

這已經discussed before，下次一定要確保你問之前進行搜索。可以節省一些時間！

來源

2012-08-30 21:45:33 SuperFamousGuy

只需設置上的鏈接的寬度：

<a data-role="button" href="index.php" data-icon="home" data-iconpos="top" style="width:75px;">Home</a> 
<a data-role="button" href="products.php" data-icon="settings" data-iconpos="top" style="width:75px;">Products</a>

或者你可以在你的CSS樣式表做到這一點：

.ui-page .ui-header .menuBtn a { 
    width : 75px; 
}

這裏是一個演示：http://jsfiddle.net/5mvF9/

來源

2012-08-30 22:38:19 Jasper

jQuery Mobile的框架，HTML屬性或CSS屬性爲解決按鍵寬度

回答

相關問題