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

2019年8月3日 229次阅读

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

以下是一个示例的链接(另请参见下面的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/>

…然后我得到了所需的行为(文本流).

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

最佳答案

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为H.是一个块行元素,也就是说,它占用了整行.您隐藏的div不会导致换行,前面的< p>元素是.

点赞