jQuery 移动框架、HTML 属性或 CSS 属性来解析按钮宽度答案

【问题标题】：jQuery mobile framework, HTML attribute or CSS property to resolve button widthjQuery 移动框架、HTML 属性或 CSS 属性来解析按钮宽度
【发布时间】：2012-08-25 16:50:01
【问题描述】：

您好，我正在开发一个 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

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

只需在链接上设置宽度：

<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/

【讨论】：

【解决方案2】：

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

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

这里是discussed before，下次请务必先搜索再提问。可能会节省一些时间！

【讨论】：