使 <a> 标记移动到新行，而不使用“display:block”答案

【问题标题】：Make an <a> tag move onto a new line, without using "display:block"使 <a> 标记移动到新行，而不使用“display:block”
【发布时间】：2012-04-03 20:14:07
【问题描述】：

我希望this page 上的导航链接各自出现在各自的行中：

A.不使用 "display:block" - 因为这会使悬停动画占据容器的整个宽度，而不仅仅是 <a> 元素。

B.不使用<br> 标签，因为我最终希望创建一个在较小屏幕上具有水平导航的响应式网站。

感谢您的帮助。

【问题讨论】：

他们已经出现在自己的行上？
也许stackoverflow.com/questions/17721031/css-force-new-line/… 有帮助？

标签： css

【解决方案1】：

你试过float:left; clear:left吗？

【讨论】：

【解决方案2】：

将导航包裹在 ul, li:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

css:

ul {list-style: none} li {display: block}

这使您可以相应地设置锚点的样式，同时强制它们断线。

【讨论】：

感谢大卫的快速回复，但我避免使用列表以更容易集中。

【解决方案3】：

您可以将<a>'s 包裹在<div>'s 中并将CSS 应用到div's 到float:left、clear:left；

div.anchorContainer
{
    float:left;
    clear:left;
}

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>

【讨论】：

感谢 Jeff，但 Cadence 早到了！
@CarolineElisa 您应该评估是否接受这个答案，因为它比 Cadence 的更详尽，并且帮助我更快。