css - 使标签移动到新行，而不使用“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}

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

Answer 3

<a>您可以将's包装在's 中<div>并将 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>