Question

我无法修改的现有代码，这里扩展类只是一个点击帮助用户扩展崩溃功能的功能。

<h3 class="expand"> TREE </h3>

现在我要做的是在Tree之后放一个字体较小的文本（Root），其中的可见性将由javascript控制。

<h3 class="expand"> TREE <div id="root" style="display:none"><font size="2"> Root</font></div></h3>

Javascript功能正常工作但Tree和Root并没有出现在1行中！是的，我不能改变h3。

Answer 1

而不是div使用span标记

<h3 class="expand"> TREE <span id="root" style="display:none"><font size="2"> Root</font></span></h3>

Answer 2

如果你只是想在每个匹配的标题中添加额外的文本，你可以使用一个小的jQuery来附加基于css类匹配的文本吗？

此外，您的文本不会出现在同一行的原因是因为您使用的是div元素。这是一个块元素，这意味着它将占据整个水平宽度。尝试使用span元素或更改div元素样式以使用display：inline-block。

这是一个快速的jQuery示例，如果它有帮助，可以附加文本。

$('h3.expand').text($(this).append("<span style='font-size:0.9em;'>&nbps;(Root)</span>")

Answer 3

你在设置root的显示值是什么？如果你使用'inline'它应该工作正常。请比较：

<h3 class="expand"> TREE <div id="root" style="display:none;"><font size="2"> Root</font></div></h3>

<h3 class="expand"> TREE <div id="root" style="display:inline;"><font size="2"> Root</font></div></h3>

希望这会有所帮助。干杯

Answer 4

生成的DIV内容真的是标题的一部分吗？如果不是更好的话，将它添加到语义中：

<h3 class="expand">TREE</h3><div class="following_headline">ROOT</div>

<style>
.following_headline {
    position: relative;
    top: -2.5em;
    left: 0;
    float: right;
    font-size: .9em;
}
</style>

同一行上的文字

4 个答案: