流體自適應無序水平列表

我不知道是否有一個解決方案，以這樣的：（！可能沒有，但你永遠不知道）流體自適應無序水平列表

假設我們有一個UL列表像這樣的：

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

和我們的CSS使它與inline-block的技巧水平顯示：

.nav li {display:inline-block;}

，我們添加一些基本的視覺效果

.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;}

沒什麼特別的。

這裏也是小提琴：http://jsfiddle.net/rjsaQ/

所以問題來了：我怎樣才能確保我的水平列表，將延伸並採取一切可用的空間，但不會去到下一行。我想我應該刪除填充，並玩最大寬度，但我試過了，它並沒有真正的工作。我應該結合寬度和最大寬度嗎？

在此先感謝您的時間和答案。

來源

2012-04-05 George Katsanos