Question

我正在尝试垂直堆叠最左侧列中的链接。我尝试了几件事，但没有运气。

有什么想法吗？

.box {
    background: #E8E8E8;
    border-radius: 8px;
    padding: 10px;
    -moz-box-shadow: 0 0 30px black;
    -webkit-box-shadow: 0 0 30px black;
    box-shadow: 0 0 30px black;
    font-family: Georgia;
}

.col1 {
    float:left;
    width:25%;
    height: 500px;
}
.col2 {
    float:right;
    width: 70%;
    height:500px;
}

.orange-heading {
    color: #0000FF;
    font-size: 40px;
}

.title_link {
    font-size:20px;
    clear:left;
}

Answer 1

我尝试使用<br>代码，但效果很好。

此外，链接上有一个错误，而不是class您放置了clas所以没有设置所需的字体大小！

http://jsfiddle.net/eLC8C/

我希望我有所帮助！

Answer 2

只需添加以下行：

.box a { display:block; }

display:block;做的一件事就是让元素从一条新线开始，尽可能向左和向右伸展，从而产生你想要的效果。

<强> jsFiddle demo.

Answer 3

您是否想要创建垂直菜单？如果是，您可以尝试示例代码。它就是这样的

Sample code

标记

<nav>
    <ul>
        <li><a href="#" clas="title_link">Section Title 1</a></li>
        <li><a href="#" clas="title_link">Section Title 2</a></li>
        <li><a href="#" clas="title_link">Section Title 3</a></li>
    </ul>
</nav>

的CSS

nav ul {
    list-style: none;
}

HTML CSS - 垂直堆叠Div

3 个答案: