这样你可以点击导航栏？

Question

当我为我的网站制作导航栏时，我想知道如何在一个盒子中制作每个导航，这样你就可以点击它而不必点击字母。我已经看到这样做而没有为每个导航栏创建一个div。这就是我所说的：

这是我用于导航栏的html：

    <div class="Nav">
        <h2><center><strong>Blitz</strong></center></h2>
        <ul>
            <li><a href="index.php">Home |</a></li>
            <li><a href="forums.php">Forums |</a></li>
            <li><a href="#">Blog |</a></li>
            <li><a href="#">About us |</a></li>
            <li><a href="#">Info </a></li>
        </ul>
    </div>



This is the css I was using: 

/*CSS script*/

body{
margin:0;
padding:0;

}


.infobox h5{
    margin:0 auto;

}

.infobox p{
    font-size: 17px;
}


.siteoffering h2{
    margin:0 auto;

}

.mainpage{
margin:0 auto;
width:75%;
height:auto;
background:#1CFFED;

}

.Nav{
margin:0 auto;
width:75%;
height:auto;
background:#A7EAFC;
overflow:auto;
border-bottom: 2px solid black;
}

.Nav ul li{
list-style:none;
float:left;
}

.Nav a{
    margin-right:20px;
    margin-left:20px;
    color:black;
    text-transform:uppercase;
    text-decoration:none;
    font-family: Arial sans-serif;
    font-weight: bold;
}



.Nav a:hover{
color:blue;
text-decoration:underline;
}

Answer 1

通常通过line-height，display: block|inline-block和padding来完成。或者锚元素<a>上的混合。

以下是一个例子：

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="forums.php">Forums</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Info</a></li>
</ul>

ul, li {
    list-style:none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    border-left: 1px solid #ccc;
}
li:first-of-type {
    border: 0;
}
li a {
    display: inline-block;
    padding: 15px;
    line-height: 40px;
}

jsFiddle：http://jsfiddle.net/1q32s584/1/

P.S。我注意到您使用的是折旧标记，特别是<center>标记。

Answer 2

如果要在链接中添加填充，可以使用此CSS：

a {
  display: block;
  padding: 5px 10px;
}