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

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

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

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

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

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

這就理解了，那么內(nèi)補(bǔ)我們并不想去掉，因?yàn)橄胫谧笥伊酎c(diǎn)空白用的?？磥碇荒軇訉挾攘?。那寬度應(yīng)該改作多少？其實(shí)去掉就可以了，因?yàn)?strong>塊元素(display:block)不浮動的情況下默認(rèn)填滿一行。（這是第二個問題，詳見 VIP 章節(jié)之 關(guān)于浮動的故事）

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

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

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

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

<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">特點(diǎn)</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>

第二個 ul 標(biāo)簽部分是新加入的內(nèi)容，這挺常用的哈，雖然其實(shí)這次我們用不到，但是玩玩還是無妨的。再簡單修改一下 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 里的內(nèi)容起作用，但是我想應(yīng)用到整個 #nav 部分，所以把選擇器中的#nav-items 換成 #nav，來看修改后的結(jié)果：

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

去看看效果吧～

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

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

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

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(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