用于解析按钮宽度的jQuery移动框架、HTML属性或CSS属性

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

我的手机网站在这里：

jQuery移动按钮的文档如下：

---

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

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

---

这已经过了，下次一定要先搜索再问。也许可以节省你一些时间

只需在链接上设置一个宽度：

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

下面是一个演示：

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