我正在尝试创建一个如下所示的垂直菜单(将立方体视为图标的占位符):
http://i.stack.imgur.com/dWWzR.png
我无法将描述放在正文下方,这是一个 <a>
当然。这是我目前在 HTML 代码中的内容:
<div id="actions">
<ul>
<li><a href="#">Element 1</a><span class="desc">Description</span></li>
<li><a href="#">Element 2</a><span class="desc">Description</span></li>
</ul>
</div>
CSS 看起来像这样:
#actions {
width: 200px;
height: 60px;
padding: 10px 25px 10px 25px;
}
#actions ul {
list-style-type: none;
}
#actions ul li {
list-style-type: none;
display: block;
margin-top: 10px;
border: 2px solid;
height: 60px;
background-color: #64ADD0;
}
#actions a {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-weight: bold;
line-height: 40px;
}
#actions a:hover {
color: #3CA0D0;
}
#actions .desc {
display: inline-block;
line-height: 20px;
}
然而,结果是描述出现在链接的右边,而且<span>
不是链接的一部分,因此它显示为普通标签。我怎样才能解决这个问题?一般来说,我是 CSS 和网页设计的新手,所以如果这是一个愚蠢的问题,请原谅。 :)
谢谢!
最佳答案
只需删除 inline-block;
中的 inline
即可使 anchor 占据整行并将其后的任何内容推送到下一行。
#actions a {
display: block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-weight: bold;
line-height: 40px;
}
关于CSS垂直菜单,下面有描述,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17310878/