CSS菜單/導航欄：居中圖像，流體寬度

Question

我的目標是生成一個導航/菜單欄，它具有居中的圖像，但會縮小以適合其內容。我現在設計的方式是，如果頁面縮小，則不適合的<li>項目最終會被推到下一行，導致導航欄更高。所有li項目和圖像都應該縮小以保持nav容器的高度爲其大小，並且只填充頁面，不會溢出。

樣品在這裏：http://jsfiddle.net/t5P7y/

<div class="container"> 
    <div class="nav-bar"> 
     <ul class="nav-ul"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li><img src="../Logo.png"></li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
      <li>Item 6</li> 
     </ul> 
    </div> 
</div> 

Answer 1

試試這個：http://jsfiddle.net/t5P7y/6/

.nav-ul { 
    display: block; 
    padding: 0; 
    margin: 0; 
} 
.nav-bar { 
    display: block; 
    height: 100px; 
    background:red; 
} 
.nav-ul li { 
    display: inline-block; 
    float:left; 
    width:14.2%; 
} 
.nav-ul img { 
    height: auto; 
    width: 100%; 
} 
.container { 
    width: auto; 
} 

Answer 2

超出這個是否是真正的導航欄，一個好的設計選擇的基本問題， 唯一的辦法我能想到實現這個沒有引入的JavaScript是使用百分比寬度爲每個<li>，假設您的列表中的項目數量不會改變

.nav-ul li { 
    float: left; 
    width: 14.28%; 
}