I am using jquery ui tabs, which requires the tabs to be <li> elements, by default at least.

I only need 2 tabs, but I am not able to size them so that they are both equal and take up 100% of available width of the ul.

here is my code.

<div id="intro_tabs" class="tabs">
    <ul id="intro_nav">
      <li>
        <h3><a href ="#tabs-1" class="null_link"><%= t('home.index.what_is_it') %></a></h3>
      </li>
      <li>
        <h3><a href ="#tabs-2" class="null_link"><%= t('home.index.how_works') %></a></h3>
      </li>
    </ul>
    <div id="tabs-1">
      <%= simple_format t 'home.index.what_intro_details' %>
    </div>
    <div id="tabs-2">
      <div id="intro_accordion">
        <h3><a href="#">Users</a></h3>
        <div>
          <%= t 'home.index.how_intro_details_user' %>
        </div>
        <h3><a href="#">Merchants</a></h3>
        <div>
          <%= t 'home.index.how_intro_details_merchant' %>
        </div>

      </div>
    </div>
  </div>

I have tried using css property width:50%, on both li's but it doesn't work.

Thanks