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

你可以使用display: block的所有锚标签将其移动到自己的行：

.redirects a { 
    display: block; 
} 

Answer 2

只需添加到你的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> 

Answer 3

您需要将显示器重置为块级值，或浮动，清除或复位BFCand它的大小。

有很多方法，只要使用符合您需求的最好的一个：

块

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>

Answer 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; 
} 

Answer 5

如果你想锚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>