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

时间:2017-01-01 19:10:43

标签: html css css3

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>

5 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:2)

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

.redirects a {
  display: block;
}

答案 2 :(得分: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 :(得分:1)

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

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

答案 4 :(得分:0)

只需将其添加到您的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>