Question

我正在尝试使用元素创建一组垂直按钮，但它无法正常工作。我在这个网站上找到了代码：https://alextheedom.wordpress.com/code-and-stuff/creating-buttons-from-ul-element/

这是我的HTML代码：

     <aside class="sidebar" role="complementary">
   <ul class="homepagebutton">
     <li><a href="https://www.google.com">Donate</a></li>
     <li><a href="https://www.google.com">Volunteer</a></li>
     <li><a href="https://www.google.com">Shop</a></li>
   </ul>
 </aside>

这是我的CSS代码：

.homepagebutton {
list-style: none;
text-align: center;
background-color: #000000;
margin-bottom: 2%;
width: 10%;
line-height: 4%;
}

.homepagebutton li a{
text-decoration: none;
color: #FFFFFF;
display: block;
}

Answer 1

#homepagebutton {
float: left;
list-style: none;
text-align: center;
background-color: #000000;
margin-bottom: 2%;
width: 10%;
line-height: 4%;
}

#homepagebutton li a{
text-decoration: none;
color: #FFFFFF;
display: block;
}

您已使用主页按钮的ID，因此您的css应引用#homepagebutton而不是.homepagebutton这将是一个类。

或者你可以保留你的CSS并将html更改为read class而不是id。

Answer 2

在样式表中，您指的是具有“homepagebutton”类的HTML元素，但在您的HTML中，您的列表中有一个ID“homepagebutton”。将.homepagebutton替换为#homepagebutton

Answer 3

你可以尝试一下：

.homepagebutton li {
    list-style: none;
    text-align: center;
    width: 10%;
    margin-bottom:1%;
}
.homepagebutton li a{
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    background-color: #000000;
    line-height: 440%;
}
.homepagebutton li a:hover{background: #666;}

demo here

我可以帮忙创建垂直按钮吗？

3 个答案: