CSS垂直菜单，描述如下

我正在尝试创建一个垂直菜单，如下所示（将立方体视为图标的占位符）：

我很难将描述放在正文下面，这当然是一个

。以下是迄今为止我在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 a {
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    font-weight: bold;
    line-height: 40px;
}

只需添加以下CSS规则

#actions > ul > li > a {
   display: block;
}

以下是我倾向于使用float:left和clear:两者的
，以便准确地知道对象的位置：

谢谢，这很有效。：）现在，如果我把span放在
中（基本上，我想要的是创建一个大的“按钮”），它会得到与标题相同的颜色和悬停效果，解决这个问题的最佳方法是什么？强制使用“.desc”规则中的样式？
#actions > ul > li > a {
   display: block;
}

#actions .desc {

    line-height: 20px;
    float:left;
    clear:both;
    padding-left: 5px;
    padding-right: 5px;
}

#actions a {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    font-weight: bold;
    line-height: 40px;
    float:left;
}