相同的HTML代码，不同的行为

Question

在此处查看演示：
http://jsfiddle.net/Liber/4w0cye36/

<div style="width: 200px;"><a href="#">dontcomsssssssssssse</a><a href="#">dontomsssssssssssse</a></div>

<br />

<div style="width: 200px;">
    <a href="#">dontcomsssssssssssse</a>
    <a href="#">dontomsssssssssssse</a>
</div>

第一个代码：
导致链接只在一行。

但第二个代码：
结果链接在两个不同的行。

我只是在第二个代码中做了一些Enter让它看起来更好，但为什么他们有不同的行为？

我只想要第二个的行为，但我正在使用代码压缩，这将导致错误的行为，如第一个代码。

Answer 1

将display:block添加到您的链接中。请参阅解决方案here。 <a>默认行为是内联的，因此每个文本修改（如新行（第一个代码））都会更改元素的可视结果。使用块显示a将占用其父级的所有宽度。

a { display: block; }