让它可以点击导航栏？

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

让它可以点击导航栏？

Making it so you can click around navigation bar?

html

css

navigationbar