我试图让按钮拉伸(stretch)开来制作一个统一的列表，但我不知道我在侧边栏中做错了什么。下面的代码使按钮出现，但只使它们与按钮上的文字一样大。我希望它们的大小统一。
HTML:
<ul id="avmenu"><li> </li><li> </li><li> </li>
<li> </li><li><a href="index.php">Home</a></li>
<li> </li><li><a href="care.php">Care</a></li>
<li> </li><li><a href="table.php">Table</a></li>
<li> </li><li><a href="photos.php">Photos</a></li>
<li> </li><li><a href="videos.php">Videos</a></li>
<li> </li><li><a href="othervideos.php">Other Videos</a></li>
<li> </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;
}
最佳答案
定义display:block给你的<a>标签。像这样写:
ul#avmenu li a {
padding:5px 10px;
border:1px solid #aaa;
background-color:green;
color:white;
text-decoration:none;
display:block;
}
关于html - 使 ul 样式的按钮大小相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9441185/