html - 在整个<li>中延伸链接

li内的文本是一个链接，其中包括文本的整个li项都应作为链接。我如何才能使整个li项目作为链接而不是li中的文本起作用？

CSS：

#navbar {
    width: 900px;
    height: 50px;
    background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}

#navbar ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align: center;
}

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}

#navbar ul li a {
    display: block;
    height: 100%;
}

#navbar a:link {
    font-weight:bold;
    color: black;
    font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
    text-decoration: none;
}

#navbar a:hover {
    background-color: #003300;
    color: gold;
}

#navbar a:visited {
    color: black;
}

a:active {
    background-color: #003300;
    color: gold;
}

HTML：

    <div id="navbar">
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#news">NEWS</a></li>
            <li><a href="#reading">READING</a></li>
            <li><a href="#store">STORE</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>

这是供参考的屏幕截图：（我的光标移到了家中）


干杯

最佳答案

然后，您应该将某些li css移至a css-像这样

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;

}

#navbar ul li a {
    display: block;
    height: 100%;
   padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}