Question

这个问题似乎得到了很多，但我找不到适合我的答案。

以下是示例的链接（另请参阅下面的HTML）：http://biskup.biowiki.org/blah.html

我希望文本在链接后流动，但事实并非如此。（我在Mac和Firefox上看这个版本。）

我想抢先一些我见过的常见回复，例如：这里Prevent linebreak after </div>

关于这些答案：

我无法将div的display属性设置为“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。

如果我将单身p /标签更改为此，正如samiz和IsisCode在回复中所建议的那样......

<p style="display:inline">
...
<p/>

...然后我得到了所需的行为（文本流）。

对于具有更多动态行为上下文的相同示例（即单击链接时会发生什么）。

Answer 1

顺便说一句，我可以通过在前面的标记中添加“display：inline”来防止这种情况（参见示例），但这是一个非常尴尬的解决方法

这就是HTML的工作原理。 <p>是一个块行元素，也就是说，它占用了整行。隐藏的div不会导致换行，前面的<p>元素是。

Answer 2

从技术上讲，您不应该在div标记内添加p。两者都是块元素，它会导致你看到的奇怪行为。您是否有理由不能使用span代替div？

Answer 3

jsFiddle：http://jsfiddle.net/5ArsK/3/

将float:left添加到包含您的热门文字的div。

<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;"/ -->


<div style="float:left;">
     Here is some text.
     Here is a
     <a href="#">  link</a>.
</div>


<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.

如何防止隐藏的div创建换行符？

3 个答案: