4

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

这是一个示例的链接(另见下面的 HTML):http ://biskup.biowiki.org/blah.html

我希望文本在链接之后流动,但事实并非如此。(我在 Mac 上的 Firefox 和 Chrome 中查看此内容。)

我想抢占一些我见过的常见回复,例如在</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/>

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

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

4

3 回答 3

2

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

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

于 2012-04-27T23:44:28.507 回答
2

从技术上讲,你不应该有一个标签的div内部。p两者都是块元素,它会导致你看到的奇怪行为。有没有理由不能使用 aspan而不是 a div

于 2012-04-28T00:15:13.730 回答
0

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.​
于 2012-04-27T23:40:39.197 回答