那么當(dāng)前我們遇到的問題是當(dāng)瀏覽器寬度過小的時候?qū)Ш降膬?nèi)容放不下，于是被排成了幾行，很不好看。當(dāng)然這個情況如果不去管他其實也沒什么問題，因為我們后面要寫的其他內(nèi)容都很寬，足以撐著頁面保證寬度足夠當(dāng)前的導(dǎo)航使用。但是有些同學(xué)希望做的更嚴(yán)謹(jǐn)一些，那么我們來試一試。

我們先來簡單分析一下，我們做的是一個電腦頁面，#nav 元素寬度和頁面相同，一般情況都是沒啥問題的，但是當(dāng)瀏覽器寬度太小，就會被擠壓，也就是 #nav 的寬度不能太小就好了。

我們能說不讓讀者調(diào)節(jié)瀏覽器尺寸么？顯然不行，那么我們規(guī)定一下 #nav 的最小寬度吧～這個很簡單，CSS 中給給 #nav 元素加一個屬性 min-width: 960px; 就好。這是什么意思呢？如果是寬度 width:960px; 的話我們就理解了，這是固定寬度 960px?，F(xiàn)在呢是 #nav 享有根據(jù)情況自動調(diào)節(jié)寬度的權(quán)利（就像以前一樣），但是，當(dāng)他的寬度小于 960px 時，不可以了，到 960px為止，你便只能固定這個寬度，不能再小了。這就是最小寬度的意義，大了你隨意，但是不可以小于這個下限，否則強(qiáng)制設(shè)定為下限的值。我們再來看看效果。寬度足夠的時候不用說了，我現(xiàn)在把瀏覽器寬度設(shè)定為 800px，然后再看：

底下出現(xiàn)了滾動條，因為要是自由寬度的話現(xiàn)在 #nav 應(yīng)該是 800px 寬，但是這小于他的最小寬度 960px，于是就被強(qiáng)制為了 960px。一個很好玩的屬性。

那么有最小就有最大， max-width 是最大寬度。與此同理的高度也可以通過添加前綴產(chǎn)生兩個屬性，最大高度（max-height）和最小高度（min-height）。因為用法相差無幾在這里就不細(xì)說了。

然后我們開始研究一下新的問題，這個問題也許有很多朋友早就等不及了，大家寫這個的時候有木有想過寬屏的朋友？這導(dǎo)航分左右，在寬屏上左邊一堆，右邊一堆，中間空著一大塊，那感覺就好像是下圖：

你看，我們解決完了尺寸太小的時候的情況，現(xiàn)在還要面臨尺寸太大的時候的情況，但是這個情況好像不是設(shè)置最大尺寸可以解決的問題啊。因為我們還是蠻希望背景填滿整個寬度的，只是內(nèi)容不要這么分散就好了。

等等，我們說內(nèi)容不要這么分散！那就把內(nèi)容部分打個包好啦～，是不是？我去打個包哦，你看著：

<div id="nav">
    <div class="nav-content">
        <div id="logo">
            <a href="#">代碼能有多難？</a>
        </div>
        <ul id="nav-items">
            <li class="nav-item"><a href="#">首頁</a></li>
            <li class="nav-item"><a href="#download">下載</a></li>
            <li class="nav-item"><a href="#feature">特點</a></li>
            <li class="nav-item"><a href="#about">關(guān)于</a></li>
        </ul>
        <ul id="nav-items-r">
            <li class="nav-item"><a href="#signin">登錄</a></li>
            <li class="nav-item"><a href="#signup">注冊</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

看到了，我又加了一個 div（.nav-content），然后把以前的內(nèi)容都放在里面?，F(xiàn)在我們設(shè)定一下他的 CSS。

#nav .nav-content {
    width:960px;
}

這個挺好理解的，我就是把內(nèi)容限定在這個里面了，給他一個固定的寬度，至于外面的 #nav 讓他帶著背景去適應(yīng)窗口好了，我們來看效果：

換做這么寫倒是內(nèi)容緊湊了，可是內(nèi)容不在中間怎么看??？來啊，這里教大家一個讓元素橫向居中的辦法，啥是居中？就是元素兩邊空余的寬度相同，對吧？所以我們這樣寫：

#nav .nav-content {
    width:960px;
    margin:0 auto;
}

就是添加了一個 margin:0 auto; 哦，上下外補(bǔ)是 0 沒有啥問題，本來我們就不需要，而且不設(shè)置默認(rèn)也是 0?，F(xiàn)在說左右，auto 就是自動啊，就是根據(jù)情況自己看著辦，你想兩邊權(quán)限一樣，當(dāng) #nav 的寬度比 .nav-content 大的時候，反正不是這邊空著就是那邊空著，兩人權(quán)利一樣大的結(jié)果就是——平分。這是最公平的辦法，那么空余的部分左右平分是不是就是左右間距一樣，就是居中了呢？

但是用這個要注意兩個問題：第一、這個辦法沒法搞定垂直居中，因為受到文檔流向上的原動力影響（參見 VIP章節(jié) 關(guān)于浮動的故事），同理浮動元素也不行；第二、被居中的元素必須指定寬度，否則兩邊都搞不清一共剩下多少，怎么平分？

來看看效果：

一切正常了，那么我們想一想，現(xiàn)在有里面的 .nav-content （已經(jīng)指定了寬度）來撐著，#nav 的 min-width 還有必要嗎？當(dāng)然沒有了，于是去掉它。

到這里，今天我們其實講了導(dǎo)航的兩種布局方式，一種占用全部寬度，一種只占用中心一部分寬度。希望大家好好練習(xí)一下。其實這兩種方式都蠻常見，大家可以留意觀察一下我們見到的網(wǎng)站哦。

然后我們發(fā)現(xiàn)我們花費了整整十章才寫了一個簡陋的導(dǎo)航，但是我們這十章只是在講導(dǎo)航么？我們快把常用的 CSS 知識說的差不多了好不好？所以一定要認(rèn)真照著做練習(xí)，多思考，覺得懂了就按著自己的想法去修改去嘗試，這樣才能讓自己真的理解他們。當(dāng)然要是不很懂也沒關(guān)系，頁面剛寫到這里，后面的內(nèi)容還要反復(fù)用到這些知識，一回生二回熟，跟著學(xué)下去慢慢也就會了哦～～

本章學(xué)習(xí)卡片：卡片 25

本章代碼下載：本章代碼

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

主站首發(fā)： http://coffee.zji.me/
Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
簡書： http://www.jianshu.com/users/d37eaf3de0ff
站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me

上一篇：第七章認(rèn)識鏈接下一篇：第五十四章一萬遍啊一萬遍！

第二十五章 導(dǎo)航條（十）

第二十五章導(dǎo)航條（十）