0

I can't get my horizontal <ul> Tab-List working the way I want. The <li> with the class ltab should fill 100% of the available space.

<style>
  ul.tabs{
    width:100%;
    display: table;
    white-space: nowrap;
  }

  ul.tabs li{
    float:left;
    white-space:nowrap;
    display:inline-block;
    font-weight: bold;
    padding:4px 8px;
    text-align:center;
    font-size:12px;
    margin-right:4px;
    border:1px;
  }

  ul.tabs li.ltab{
    white-space:nowrap;
  }     
</style>

HTML:

<ul class="tabs">
  <li><a href='#'>Tab 1</a></li>
  <li><a href='#'>Tab 2</a></li>
  <li class="ltab">&nbsp;</li>
</ul>

Adding width:100% to the ul.tabs li.ltab causing this tab moving to the next line. Any ideas how to solve this?

xnome
  • 482
  • 2
  • 11
lickmycode
  • 2,069
  • 2
  • 19
  • 20

1 Answers1

2

Your display:table was a good start, the only thing left was setting display:table-cell on the li's and forcing the first ones to the smallest width with width:1px while allowing the last one to fill all the remaining space with width:100%.

JSFiddle: http://jsfiddle.net/dqNLR/1/

darthmaim
  • 4,970
  • 1
  • 27
  • 40
  • Do you know how I can keep the `margin-right:5px` between the `
  • ` ? Actually this is ignored and I have no space between the tabs anymore
    • – lickmycode Nov 02 '13 at 04:33
  • Margins won't work with `display:table-cell`. You can try using `border-right: 5px solid transparent` (if you are not using borders, otherwise add your borders to an element inside the `li``). You can also use `border-spacing: 5px`. I will make you another jsfiddle with a few options you have. – darthmaim Nov 02 '13 at 04:39
  • Nevermind, found the solution here: http://stackoverflow.com/questions/16398823/why-does-a-div-with-display-table-cell-not-affected-by-margin :) – lickmycode Nov 02 '13 at 04:39
  • 1
    awesome :) here a jsfiddle with some more possibilities: http://jsfiddle.net/dqNLR/3/ – darthmaim Nov 02 '13 at 04:57