Question

I have code like this:

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

My CSS looks like this:

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

The result is some nice looking button links.

However all the buttons are different widths. What I would like to do is to have them all the same width for example 200px, and to have the pointer icons on the right all line up vertically. Something the same as in the following link:

Flyout menu

Is there some way that I could change the CSS to make my links look like this?

Answer 1

.ui-button { width: 200px; }

I don’t quite understand what your problem is.