Question

我有这样的代码：

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

我的CSS看起来像这样：

#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，并使右侧的指针图标全部垂直排列。与以下链接中的内容相同：

Flyout menu

是否有某种方法可以更改CSS以使我的链接看起来像这样？

Answer 1

.ui-button { width: 200px; }

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

Answer 2

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

如何使jQuery UI按钮具有相同的宽度，图标与右边的距离相同？

2 个答案: