这个问题可能是一个有趣的问题……在显示文本的网页上，我需要一个特定的行为：当用户点击一些特殊的词时，这个词的解释会在点击的词下方打开。所有的问题是：它应该真正在单词下方打开，就像“打开”两段一样，而不会使后面的文本跳到下一行。
我找到了一个效果很好的解决方案，使用 CSS 浮动属性。你可以在那里看到它（比下面的代码更能说）：http: //jsfiddle.net/3gwzx/3/
这个解决方案的主要问题是它使用了嵌套跨度。而且，由于 span 不是块标签，因此填充不适用于它们。因此，在灰色框内，文本永远不会有任何水平填充（垂直填充是可以的）-否则它会改变框本身的大小-或者我错过了什么？- 这很糟糕。有没有人有解决方案？我应该以另一种方式重新考虑这个问题吗？
非常非常感谢你！
这是 HTML 的样子：
<body onload="putListeners()">
<p>This is the normal text here, you cannot click it. But some words needs long
explanations, like this one : <span class="note">click on me
<span class="noteTxt">The explanation begins here <a class="foo" href="bar.html"> and
could have link</a> that one should be able to click.
And the note can be loooong, long, long, very, very long.
</span>
</span>
And here, the text carry on. It could carry on for a long, long time.
And with all the other solutions I tried, this part of the text "jumps" after the note,
on a new line, when it appears. What I like here is that, when you open the note,
it really "open the paragraphs in two". But i cannot give a padding
to those nested span… I should have a div… but you cannot put a div
inside a span !</p>
</body>
这是JS
function putListeners() {
//just listens to the text…
var elements = document.getElementsByClassName("note");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", showNote, false);
}
};
function showNote()
{
//content to show
var currentTxt;
//finds the nested noteTxt
for (var i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].className == "noteTxt") {
currentTxt = this.childNodes[i];
break;
}
}
//displays it or hides it
if(currentTxt.style.display=="none" || currentTxt.style.display=="")
{
currentTxt.style.display="block";
}
else
{
currentTxt.style.display="none";
}
return true;
};
而且，有关信息，CSS 的相关部分（您可能已经弄清楚它的样子 - Jfiddle 中的完整代码）：
span.note {
position: static;
}
span.note span.noteTxt {
display: none;
float: left;
color: black;
width: 100%;
background-color: #eaeaea;
}