Question

I would like to move each <a> to a new line without using <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>

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>

或浮动并清除

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 2

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

.redirects a {
  display: block;
}

Answer 3

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

Answer 4

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

finddata

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

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

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

移动<a> tag to a new line without <br/>

5 个答案: