0

I'm wondering if there's a solution to this: (possibly not, but you never know!)

Assuming we have a ul list like this one:

<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/">What we do</a></li>
<li><a href="/">Human resources</a></li>
<li><a href="/">How we work</a></li>
<li><a href="/">Management</a></li>
<li><a href="/">Multimedia</a></li>
</ul>

and our CSS makes it display horizontally with the inline-block trick:

.nav li {display:inline-block;}

and we add some basic visuals

.nav li {border-right: 3px solid #ffb521;}
.nav a:link, .nav a:visited {color: #a51d21;font: bold 18px/18px Calibri,Tahoma,sans-serif;padding: 10px 30px 10px 30px;display: block;background: #ffd074;}
.nav a:hover, .nav a:active {background:#a54d24;color:#ffd074;}

nothing special.

Here's also the fiddle: http://jsfiddle.net/rjsaQ/

So here comes the question: How can I ensure that my horizontal list, will stretch and take all available space, but won't go to the next line. I guess I should remove the paddings, and play with max-width, but I tried it and it doesn't really work. Should I combine width and max-width?

Thanks in advance for your time and answers.

George Katsanos
  • 13,524
  • 16
  • 62
  • 98

1 Answers1

1

There is, you should set list to display: table and list items display: table-cell but this solution is not cross browser

Example: http://jsfiddle.net/rjsaQ/1/

simoncereska
  • 3,035
  • 17
  • 24