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是块，不能与任何其他元素共享同一行。此外，您甚至可以将.highlighted设置为块元素。

你可以通过使它们成为内联块来改变它：

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

Answer 2

.mailcontainerheader a{ 
  display: inline-block; 
}

将此添加到您的CSS

为什么我的文本中间有换行符？

2 个答案:

CodePen