Question

I’m attempting to make the buttons stretched out to make a uniform list but I don’t know what I’m doing wrong in my sidebar. The following code makes the buttons appear but makes them only as big as the word on it. I would like for them to be uniform in size.

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

Define display:block to your <a> tag. Write like this:

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