html - 将 标签移动到没有 的新行

Question

我想移动每个<a>换行而不使用 <br> .

<div class="redirects">
    <a href="http://google.com">1</a>
    <a href="http://google.com">2</a>
    <a href="http://google.com">3</a>
</div>

Answer 1

您需要将显示重置为 block 级值，或 float 并清除或重置 BFC 并调整其大小。

方法有很多种，选择最适合你的方法:

阻止

a {display:block;background:grey}

<div class="redirects">
    <a href="http://google.com">1</a>
    <a href="http://google.com">2</a>
    <a href="http://google.com">3</a>
</div>

表格

a {display:table;background:gray}

<div class="redirects">
    <a href="http://google.com">1</a>
    <a href="http://google.com">2</a>
    <a href="http://google.com">3</a>
</div>

flex ？

a {display:flex;background:gray}

<div class="redirects">
    <a href="http://google.com">1</a>
    <a href="http://google.com">2</a>
    <a href="http://google.com">3</a>
</div>

或 float 并清除

a {float:left;clear:left;background:gray}

<div class="redirects">
    <a href="http://google.com">1</a>
    <a href="http://google.com">2</a>
    <a href="http://google.com">3</a>
</div>

甚至行内 block +宽度

a {display:inline-block;width:100%;background:gray}

<div class="redirects">
    <a href="http://google.com">1</a>
    <a href="http://google.com">2</a>
    <a href="http://google.com">3</a>
</div>