如何使jQuery UI按钮的宽度与图标的右侧间距相同？

我有这样的代码：

<div class="ui-widget">
    <ul style="list-style-type: none; padding-left: 0;" id="menuList">
      <li>
        <a href="/C2D" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button">
          <span class="ui-button-text">test test  test</span>
          <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span>
        </a>
      </li>
      ...
      ...
      <li>
        <a href="/C2E" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button">
          <span class="ui-button-text">test</span>
          <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span>
        </a>
      </li>
      ...
      ...
      <li>
        <a href="/C2F" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button">
          <span class="ui-button-text">test test</span>
          <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span>
        </a>
      </li>
    </ul>
</div>

#menuList li a.ui-button span.ui-button-text { padding-top: 0; padding-bottom: 0; }
#menuList a.ui-button { margin-bottom: 5px; height: auto }

结果是一些漂亮的按钮链接

但是，所有按钮的宽度都不同。我想做的是让它们都具有相同的宽度，例如200px，并且让右边的指针图标垂直排列。与以下链接中的内容相同：

有什么方法可以改变CSS使我的链接看起来像这样吗

.ui-button { width: 200px; }

我不太明白你的问题是什么

#menuList a.ui-button { margin-bottom: 5px; height: auto; width:200px; }​

---

我不太明白你的问题是什么。

谢谢。但是当我这样做的时候，所有的文本都是居中的。我希望文本左对齐。添加文本对齐：左；对于这门课，问题解决了吗？谢谢。但是当我这样做的时候，所有的文本都是居中的。我希望文本左对齐。添加文本对齐：左；对这门课来说，问题解决了吗？谢谢，但是有没有办法让课文不在中间排列？我想蒂姆·德哈恩给了你答案。谢谢，但是有没有办法让课文不在中间排列？我想蒂姆·德哈恩给了你答案。

#menuList a.ui-button { margin-bottom: 5px; height: auto; width:200px; }​