1

我有一些 CSS 插入了一个破折号，unicode U+2014 —，以便在我的网站上提供一个很好的格式在声明的源之前。令人讨厌的是，在此之后它打破了一个新行（我尝试从 span 更改为 div 但没有用）。

检查 Chrome 中的元素的屏幕截图

文档树如下所示：

<span class="source">...</span>
<p>Source author, text goes here etc. etc.</p>

该span行的计算样式包括display:inline，而计算的样式phas display:block，我猜这可能导致新行？

我正在阅读相关的 CSS 并且看不出它应该开始一个新行的任何理由，我在这个问题的内容中没有\A ...

任何 CSS 高手都可以指出我所缺少的吗？::before可能需要伪元素的替代实现？

这里涉及的 CSS 是

div.source:before{content:"\2014";margin-left:0.9em;margin-right:0.9em; white-space:nowrap;}#content

（我插入了 white-space:nowrap 前一阵子试图解决这个问题，但它对新行没有做任何事情）

4

2 回答 2

2

您可以尝试使用+如下所示的相邻兄弟选择器 ( )。它在 IE >= 7 中受支持。

HTML：

<span class="source">&mdash;</span>
<p>Source author, text goes here etc. etc.</p>
<p>Source author, text goes here etc. etc.</p>

CSS：

.source + p{display: inline;} 
/* applies inline style to only the <p> tag directly following a tag with class=source */

小提琴演示| 浏览器支持

于 2013-10-20T15:53:18.307 回答
0

为什么不class="source"直接将 p 添加到标签中，而不是添加不必要的span？

您现在看到的行为是正确的，因为p元素默认是块级元素。你可以给它一种风格，display: inline;但正如我上面提到的，最好去掉span并将类添加到p标签中。

于 2013-10-20T15:31:20.763 回答