現(xiàn)在我們來學著解決問題哦，我們還有一個遺留問題沒有解決，就是頁面底下的滾動條。你肯定又說了：“你還是知道解決??？你不知道我都看著礙眼好多章了么？”這個不怨我啊，你們看看我的截圖，我的系統(tǒng)是超細滾動條，所以我看著一點也不礙眼啊?。ê昧耍梢匀哟u頭了，我好撿回家蓋房子娶老婆……）

方法很簡單啊，右鍵審查元素，然后鼠標在代碼里劃過每個元素，看看最可能是哪個元素引起的問題。

然后我就覺得最可能是這里出了問題，為啥啊，這么多元素，就它的寬度比我窗口寬度還大（我當前窗口的寬度為 800px）。

你看，其實查找問題也未必很難，那么究竟是出了什么問題呢？這里我們猜猜啊，我們知道他如果遵循我們設置的寬度的話，那么他的寬度應該是 100% ，當前也就是 800px（body 元素當前的寬度值）。再看看我們加的內補，左右各 30px。這要是 800+30+30=860 ，正好是當前元素的寬度。這應該就是問題的原因了。

那么這里涉及到兩個問題。第一個，我們設置的寬高到底是什么？其實我們設置的寬高，不是元素邊框（邊界）的寬高，倒更像是元素內可用面積的寬高。就好像我們說的不是快遞箱的尺寸，是他加上填充物之后還能裝多大面積的東西，理解沒？

所以元素的實際尺寸（從邊框開始測量），實際上是設置的寬高加上內補的尺寸。就是快遞箱的尺寸等于里面的東西再加上填充物的尺寸。說簡單點就是箱子里填充物（內補，padding）的多少會影響箱子的大?。ㄔ氐膶嶋H面積），當然外面裹多少泡泡紙（外補，margin）都不會影響箱子的大小。

這就理解了，那么內補我們并不想去掉，因為想著在左右留點空白用的?？磥碇荒軇訉挾攘?。那寬度應該改作多少？其實去掉就可以了，因為塊元素(display:block)不浮動的情況下默認填滿一行。（這是第二個問題，詳見 VIP 章節(jié)之 關于浮動的故事）

于是，去掉了 #nav 的寬度之后，我們獲得了一個雖然簡陋，但是確實看得過去的導航條。

回想我們學了這么多節(jié)課，其實主要在說一些基本的 CSS 知識了，真正看我們寫下的代碼卻沒有幾行，再看看代碼，差不多也能看懂一二了，好像也不過如此。

這是一個完整的導航了？當然不是，不過畢竟從無到有，從難看到現(xiàn)在看的過去，我們完成了一輪創(chuàng)造的過程，算得上是我們學習過程中一個重要里程碑！

如果到這里你基本都明白了，那么我來帶著你做點壞事哦，挺簡單的，我們把當前的 #nav 部分的 Html 代碼復制一遍，修改一下 id（id 不能重復啊，而且我們也需要用他進行一些區(qū)分），這么說有點抽象，來看一下我改過之后的代碼（我只粘貼 body 標簽之間的嘍～）

<div id="nav">
    <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">關于</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>

第二個 ul 標簽部分是新加入的內容，這挺常用的哈，雖然其實這次我們用不到，但是玩玩還是無妨的。再簡單修改一下 CSS，下面是原來的 CSS 中的一部分

#nav-items {
    float: left;
    margin:0;
}
#nav-items .nav-item {
    float:left;
    list-style: none;
}
#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
    display: block;
    height: 50px;
    padding: 0 20px;
}

現(xiàn)在第一條 #nav-items 不用動，但是我們要照貓畫虎的給新添加的 #nav-items-r 加一條，只是改作向右浮動。下邊兩條現(xiàn)在明顯只對第一個 ul 里的內容起作用，但是我想應用到整個 #nav 部分，所以把選擇器中的#nav-items 換成 #nav，來看修改后的結果：

#nav-items {
    float: left;
    margin:0;
}
#nav-items-r {
    float: right;
    margin:0;
}
#nav .nav-item {
    float:left;
    list-style: none;
}
#nav .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
    display: block;
    height: 50px;
    padding: 0 20px;
}

去看看效果吧～

于是我們得到了一個有左右兩部分導航的導航條，現(xiàn)在我希望大家回過頭去對整個導航部分認真的復習一下，免得學到后面把前邊的忘記了，那樣就容易混淆了。另外一定記得每一節(jié)課都要跟著做哦～～

下一節(jié)課我們來美化我們的導航條。

本章學習卡片：卡片 22

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

• 主站首發(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)本人許可，禁止任何形式轉載。相關事宜請聯(lián)系： dms@zji.me