html - 使 ul 样式的按钮大小相同

Question

我试图让按钮拉伸(stretch)开来制作一个统一的列表，但我不知道我在侧边栏中做错了什么。下面的代码使按钮出现，但只使它们与按钮上的文字一样大。我希望它们的大小统一。

HTML:

<ul id="avmenu"><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li>
    <li>&nbsp;</li><li><a href="index.php">Home</a></li>
    <li>&nbsp;</li><li><a href="care.php">Care</a></li>
    <li>&nbsp;</li><li><a href="table.php">Table</a></li>
    <li>&nbsp;</li><li><a href="photos.php">Photos</a></li>
    <li>&nbsp;</li><li><a href="videos.php">Videos</a></li>
    <li>&nbsp;</li><li><a href="othervideos.php">Other Videos</a></li>
    <li>&nbsp;</li><li><a href="links.php">Links</a></li>
</ul>

CSS:

ul {
    margin: 10px;
    list-style-type: none;
    list-style-position: inside;
    padding: 0px;
    text-align: center;
    font-size: 18px;
}
ul#avmenu{
    margin:35px 0;
    padding:0;
    font:12px Verdana;
    list-style-type: none;
}
ul#avmenu li a {
    padding:5px 10px;
    border:1px solid #aaa;
    background-color:green;
    color:white;
    text-decoration:none;
}
ul#avmenu a:hover{
    background:#fff;
    color:#222;
}
ul#avmenu li.current a {
    border:1px solid #777;
}

Answer 1

定义display:block给你的<a>标签。像这样写:

ul#avmenu li a {
    padding:5px 10px;
    border:1px solid #aaa;
    background-color:green;
    color:white;
    text-decoration:none;
    display:block;
}