css - 为什么我的文本中间有一个换行符？

Question

我觉得问这个问题很愚蠢，但我不明白为什么会有换行符。所有三个链接都应该在同一行。

HTML

<div class="mailcontainerheader"><a href="/messages/inbox/"><div class="highlighted">Inbox</div></a> | <a href="/messages/outbox/">Sent</a> | <a href="/messages/trash/">Trash</a></div>

CSS

.mailcontainerheader .highlighted {
  color:red;
  display:block;
}

http://codepen.io/anon/pen/MYxGaJ

所以我想具体我的问题是如何将样式应用到父 div 内的链接之一，而不用那个神秘的换行符？

Answer 1

您的第一个 <a> 中有一个 div标签。

div 是 block ，不能与任何其他元素共享同一行。此外，您甚至设置了 .highlighted成为 block 元素。

您可以通过将它们设为内联 block 来更改它:

a div
{
    display: inline-block;
}

---

如果您只是想突出显示特定的 <a>标签，您应该只将 CSS 样式应用到 <a> ，而不是插入一个完整的额外元素。

为什么不这样做:

<div class="mailcontainerheader">
    <a class="highlighted" href="/messages/inbox/">Inbox</a> | 
    <a href="/messages/outbox/">Sent</a> | 
    <a href="/messages/trash/">Trash</a>    
</div>

CSS:

.highlighted
{
    color: red;
}

CodePen