这个问题似乎被问了很多，但我找不到适合我的答案。
这里是示例的链接(另请参见下面的 HTML):http://biskup.biowiki.org/blah.html
我希望文本在链接之后流动，但事实并非如此。 (我在 Mac 上的 Firefox 和 Chrome 中查看这个。)
我想抢占一些我见过的常见回复，例如这里Prevent linebreak after </div>
关于那些答案:
- 我无法将 div 的显示属性设置为“inline”或“inline-block”，因为我确实希望它被隐藏。无论如何，这对我来说似乎不起作用:参见例如http://biskup.biowiki.org/blah2.html
- "float:left"也不起作用
- 我不能使用 span 元素，因为我真的希望它是一个 div，所以我可以将它用作弹出元素
- 因为它是一个弹出元素，最终会被弹出它的 JavaScript 代码分离/重新定位/重新附加(这将通过单击 div 旁边的链接触发)，我可以在技术上将 div 放在其他地方在文档中(例如在最后)；然后它就不会中断流程；但是由于此 HTML 是动态生成的，因此在显示它的链接旁边创建 div 非常方便，如本例所示
顺便说一下，我可以通过在前面的标签中添加“display:inline”来防止这种情况(参见示例)，但这是一个非常尴尬的解决方法
这是我的示例的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dumb bug</title>
</head>
<body>
<p/>
<!-- the following (commented-out) line prevents the div from starting a newline; still seeking a better solution that is local to the div or adjacent anchor element -->
<!-- p style="display:inline;"/ -->
Here is some text.
Here is a
<a href="#"> link</a>.
<div style="display:none;">
This text is inside the hidden div, and should not be shown.
(A separate piece of code will detach/reattach/position/show this div as a popup, but it's convenient to generate it in the same place as the link.)
</div>
And here is some more text, that I want to flow on the same line after the link.
And some more.
<p/>
<p style="display:inline;"/>
Here is another paragraph.
</body>
</html>
编辑添加:单例 p/标签是大多数浏览器都可以原谅的草率语法(解释为 p ... p/包含 div 元素)，这隐藏了我对 div 继承方式的基本误解来自其父 p 的布局样式。
如果我按照 samiz 和 IsisCode 在回复中的建议将单例 p/标签更改为此...
<p style="display:inline">
...
<p/>
...然后我得到了想要的行为(文本流)。
对于具有更多动态行为上下文的同一示例(即单击链接时发生的情况)。
最佳答案
By the way, I can prevent this by adding "display:inline" to the preceding tag (see example), but that is an extremely awkward workaround
这就是 HTML 的工作原理。 <p>是一个 block 行元素，也就是说，它占据了整行。您隐藏的 div 不会导致换行，前面的 <p>元素是。
关于css - 如何防止隐藏的 div 创建换行符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10359189/