制作一个<a> tag move onto a new line, without using &#34;display:block&#34;</a>

Question

我希望this page上的导航链接各自显示在他们自己的行上：

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

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

感谢您的帮助。

Answer 1

您是否尝试过float:left; clear:left？

Answer 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}

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

Answer 3

您可以将<a>包裹在<div>中，并将div的CSS应用于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>