将 <a> 标签移动到不带 <br> 的新行答案

【问题标题】：Move <a> tag to a new line without <br>将 <a> 标签移动到不带 <br> 的新行
【发布时间】：2017-05-16 01:13:43
【问题描述】：

我想在不使用<br> 的情况下将每个<a> 移动到新行。

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

【问题讨论】：

stackoverflow.com/questions/16643424/…

标签： html css

【解决方案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>

【讨论】：

投了赞成票...你错过了一个，所以我将它添加到答案列表中:)
@LGSon 哦，是的，根本没想到那个：

【解决方案2】：

如果要将锚点a保留为默认值，可以使用伪元素来换行

a::after {
  content:"\A";
  white-space: pre;
}

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

【讨论】：

【解决方案3】：

您可以使用display: block 一个所有锚标记将它们移动到自己的行：

.redirects a {
  display: block;
}

【讨论】：

【解决方案4】：

正确的语义标记应该基于如下列表：

<ul class="redirects">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

使用该标记，您需要的样式应如下所示：

UL.redirects,
UL.redirects > LI {
    margin:  0;
    padding: 0;
}

UL.redirects {
    list-style: none;
}

并且，如果您需要将链接设置为块：

UL.redirects A {
    display: block;
}

【讨论】：

【解决方案5】：

只需将其添加到您的 CSS 文件中：

.redirects a {display: block;}

CSS 文件应在头部链接。请注意，也可以将此 CSS 添加到正文中，如下所示：

<style>
    .redirects a {display: block;}
</style>
<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>

【讨论】：