Way to get different size for each navbar item?

Way to get different size for each navbar item?

Hi,

I'm trying to get my nav-bar to have one item that is only the icon (for space issues). Here is the code I'm using:

  1.                 <div data-role="navbar" data-iconpos="left">
  2.                     <ul>
  3.                         <li>
  4.                             <a href="/cgi-bin/links/page.cgi?t=mobile_en" data-theme="" data-icon="home">
  5.                                 Home
  6.                             </a>
  7.                         </li>
  8.                         <li>
  9.                             <a href="/cgi-bin/links/search.cgi" data-theme="" data-icon="search">
  10.                                 Search
  11.                             </a>
  12.                         </li>
  13.                        
  14.                             <li>
  15.                                 <a href="javascript: void(0);" data-theme="" data-icon="check" id="doLogout">
  16.                                     Logout
  17.                                 </a>
  18.                             </li>
  19.                             <li>
  20.                                 <a href="javascript: void(0);" data-theme="" data-icon="star" id="doBookmarks" data-iconpos="notext">&nbsp;</a>
  21.                             </li>
  22.                     </ul>
  23.                 </div>
  24.             </div>

That works, but cos there is 4 items it shows ... alongside each item. I really want the last one to just be as narrow one (to stop the space issue). Is there a way to custom the width? I've tried a basic CSS rule but that just screws things up:

  1. #doBookmarks { width: 100px; }
TIA

Andy