在单独的行中获取 div 中的链接

Question

我有以下代码：

    <div>
        <a href="www.google.com">Google</a>
        <a href="www.amazon.com">Amazon</a>
        <a href="www.apple.com">Apple</a>           
    </div>

这给出：

 Google Amazon Apple

如何获得

Google
Amazon
Apple

Answer 1

简单

a{
    display:block;
}

或使用display:table

因为默认锚标签display: inline。

勾选Fiddle

Answer 2

如果你想让 link 可以被父元素的整个宽度点击，使用 display: block.

a {display: block}

如果您想让 link 仅在其实际宽度处可点击，请使用 display: table 和 table-row。

div {background: lightgrey; display: table}
a {display: table-row}

https://jsfiddle.net/hcukvvz5/

或 float 结合 clear。

a {float: left; clear: left;}

https://jsfiddle.net/hcukvvz5/1/

Answer 3

试试这个。

a{
display:block;
text-decoration:none;
}

检查fiddle

Answer 4

a {display:block;}
或在您的标签后添加 </br>

Answer 5

这将解决问题而不会使整行可点击：

div a:after {
  content: "";
  display: block;
  height: 0;
  width: 1px;
}

查笔：http://codepen.io/anon/pen/QbKLvN

Answer 6

这样试试：Demo

css:

div a:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}

Answer 7

我认为你选择 (display: table;) 因为 (display: block;) 覆盖了全宽锚点。

在单独的行中获取 div 中的链接

Get links in div on separate lines

html

css

styling