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