W3school导航栏设置时的问题

    <style>
        .menu {
            width: 1219px;
            height: 60px;
            line-height: 60px;
            background-color: rgb(214, 214, 214);
        }

        .list {
            float: left;   
        }
        .list a{
            text-decoration: none;
            color: rgb(119, 119, 119);
            font-size: 18px;
            padding:18px 40px;
        }
        .list a:hover{
            background-color: rgb(100, 99, 99);
            color: white; 
        } 
    </style>

<div class="menu">
    <div class="list">
        <a href="#">HTML/CSS</a>
    </div>
    <div class="list">
        <a href="#">Browser Side</a>
    </div>
    <div class="list">
        <a href="#">Server Side</a>
    </div>
    <div class="list">
        <a href="#">Programming</a>
    </div>
    <div class="list">
        <a href="#">XML</a>
    </div>
    <div class="list">
        <a href="#">Web Building</a>
    </div>
    <div class="list">
        <a href="#">Reference</a>
    </div>
</div>

最开始将padding设置给了list,虽然表现效果相同，但是点击时发现只有文字部分（即点击a元素）才能实现跳转，并且鼠标移入时，如果鼠标没有放在文字上，文字颜色也无法发生改变，只能改变背景颜色。因而可以将padding设置给a元素，从而使整个框都是a。
也可以直接将a设置为块元素，继承父元素的宽高。此时不用担心a会发生纵向排列，因为a在父元素list中，list已经浮动，只占一行。