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

Question

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

此處的示例： 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%;
}