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

-1

我想创建一个垂直的按钮使用一个元素，它不工作。我发现这个网站上的代码：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; 
}

来源

2014-12-08 Stanley

，您可以尝试：

.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

来源

2014-12-08 01:43:55 jikey

谢谢！这很好用！ – Stanley 2014-12-08 01:51:17

#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 homepagebutton和因此你的CSS应该参考#homepagebutton而不是.homepagebutton这将是一个类。

或者，您可以将CSS保留原样并将html更改为class而不是id。

来源

2014-12-08 01:27:19 jono

我改变了我的UL从ID上课。我是否认为在这种情况下使用class和id没有区别？ – Stanley 2014-12-08 01:40:55

主要区别在于，每页只能使用每个唯一ID，而如果您想在页面的其他位置显示这些主页按钮，则可以反复使用该类。 – jono 2014-12-08 02:15:03

在你的样式表中，你指的是具有'homepagebutton'类的HTML元素，但在你的HTML中，你的列表有一个ID'homepagebutton'。更换.homepagebutton与#homepagebutton

来源

2014-12-08 01:28:20 adam

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

回答

相关问题