使<a>标签移动到新行,而不使用"display:block"

Question

我希望此页面上的导航链接各自显示在他们自己的行上:

A.不使用" 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}

这使您可以相应地设置锚点的样式,同时强制它们打破线条.