Question

我正试图让按钮伸出来制作一个统一的列表，但我不知道我在侧边栏中做错了什么。下面的代码使按钮出现，但使它们只与它上面的单词一样大。我希望他们的身材一致。

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

Answer 2

您需要添加：

display:block;
width:<width>px;

到ul#avmenu li a

修改您还可以通过添加：

来删除额外的<li> </li>
ul#avmenu li{ margin:12px 0; }

顺便说一下，你的css中有list-style:none的重复。

注意：我更喜欢使用min-width:;而不是普通宽度，因为它允许项目在溢出时仍然看起来正确。

Answer 3

请尝试以下

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

您的代码很好，您只需要从每个类名中删除ul。

Answer 4

添加一个标签例如<li> </li><li><a href="index.php"><span>Home</span></a></li>
添加此css

#avmenu li a span { 宽度：100px！重要; 显示：内联块; }

做了欢呼声

使ul风格的按钮具有相同的大小

4 个答案: