0

您好，我正在开发一个 jQuery 移动网站，

关于我的红色按钮的呈现我的问题，标题中“主页”和“产品”按钮的宽度似乎由它们内部的文本决定。这意味着一个按钮看起来比另一个更薄。有没有办法将按钮设置为相等一致的宽度？我想在标题中实现一致的按钮宽度。

也许我为按钮使用了错误的 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

4

2 回答 2

1

最好的办法是编辑与 JQuery Mobile 一起使用的 CSS 主题，以便在所有页面上获得一致的按钮大小。如果您不喜欢这样做，只需将它们设为同一个类并在您提供的 CSS 页面中设置宽度

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

这个之前已经讨论过了，下次问之前一定要搜索一下。可能会为自己节省一些时间！

于 2012-08-30T21:45:33.463 回答
0

只需在链接上设置宽度：

<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-30T22:38:19.720 回答