0

我正在尝试创建一个看起来像这样的垂直菜单（将多维数据集视为图标的占位符）：

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 和网页设计的新手，所以如果这是一个愚蠢的问题，请原谅。:)

谢谢！

4

3 回答 3

1

只需删除inline你的inline-block;，这将使锚占据整条线并将其后的任何东西推到下一条线。

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

http://jsfiddle.net/LmbLR/

于 2013-06-26T03:12:07.813 回答
1

只需添加以下 CSS 规则

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

这是演示

于 2013-06-26T03:12:14.820 回答
0

我倾向于使用 float:left 和 clear:both 来准确了解对象的位置：http: //jsfiddle.net/MAt8Y/

#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;
}
于 2013-06-26T03:22:41.867 回答