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

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

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

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

Answer 3

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

Answer 4

尝试这样： Demo

的CSS：

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

Answer 5

如果您想要按父元素的整个宽度点击链接，请使用display: block。

a {display: block}

如果您想以实际宽度点击链接，请使用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 6

试试这个。

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

检查fiddle

Answer 7

我认为你选择（display：table;）因为（display：block;）涵盖全宽度锚点。

在div中获取不同行的链接

7 个答案: