将<a>标记移动到没有<br>的新行

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

您需要将显示重置为块级别值,或者浮动并清除或重置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>

柔性 ？

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>

或漂浮和清除

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>

甚至内联块+宽度

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>