水平导航条的制做

原文发表于我本身的服务器www.jjxiaoliu.cn；不过这个服务器我可能不打算续费了，因此搬到cnblogs来。

导航条（导航菜单）基本上就是带连接的列表，因此<ul>列表标签无疑是个天然的选择；然而这并非必须的——事实上在整个制做过程当中几乎没有使用到列表标签的特性。因此咱们的例子彻底不使用列表标签。

首先，水平导航条老是占据一整行，因此咱们用<div>包围之；其次，咱们用<span>包围每一个菜单项；最后，每一个菜单项都是一个<a>。注意这里的<span>实际上是能够不用的；咱们使用<span>仅仅是为了语法上看起来更天然一点（将<span>做为<a>的容器，相似于用<li>做为<a>的容器）。、

首先是菜单内容：

<div class="menu">
    <span class="item"><a href="#">File</a></span><!-- 
 --><span class="item"><a href="#">Edit</a></span><!-- 
 --><span class="item"><a href="#">View</a></span><!-- 
 --><span class="item"><a href="#">Help</a></span>
</div>

注意这里咱们在相邻菜单项之间都使用了HTML注释，以使得浏览器认为全部菜单项文字（<span>标签）之间没有空格和换行，避免浏览器在相邻菜单项之间插入额外空格，形成菜单项的换行。

接着咱们设计相关的CSS。首先是整个菜单条：

.menu {
    /* 指定最小宽度，
       避免当缩小浏览器窗口时菜单项之间发生重叠 . */
    min-width: 400px;
    /* 导航栏占据整个浏览器窗口宽度 */
    width: 100%;
    /* 居中显示 */
    margin: 0 auto;
}

若是是用html列表标签制做，咱们这里还要指定<li>的display属性为inline，以使得全部列表项显示在同一行，但对于span来讲就没必要了。接下来设定<a>标签的style。注意这里不是设置span标签的style；由于这里span标签只是个容器，真正响应用户鼠标或键盘事件的是a标签。

.menu .item a {
    font-size:24px;
    /* 咱们但愿能设定连接的padding等属性，
       以便将菜单项显示为一个“块”，
       所以设置显示方式为inline-block */
    display: inline-block;
    padding:4px 4px 4px 4px;
    /* 后面咱们须要设置每一个菜单项的显示宽度占比，
       所以设置box-sizing为border-box。 */
    box-sizing: border-box;
    /* 有4个菜单项，所以每一个项宽度为25%（包含padding）。 */
    /* 若是咱们上面没有设置box-sizing，
       这里加上padding后总宽度就会超过100% */
    width: 25%;
    text-align: center;
    text-decoration: none;
    background-color: #FF0000;
    color: #000000;
}

核心的东西就上面这么多了。剩下的就是修改连接样式的常规工做了。