当附加<详细信息>时元素到带有innerHTML的div，div会“向下”移动也

Question

通过此处的示例可以轻松描述该问题。

代码如下：

HTML:

<div id="example">Hello </div>

JS:

document.getElementById('example').innerHTML += '<details style="display: inline"><summary>World</summary>Something</details>';

问题是，当我单击“World”时，会出现“Something”，但“Hello”也会下降，如下所示：

我希望当您单击“World”时，“Hello”保持在原位。

有什么建议吗？提前致谢！

Answer 1

为 #example 设置 vertical-align: top 似乎得到了我认为你想要的布局。 HTML：

<div id="example">Hello <details><summary>World</summary>Something</details></div>

和 CSS：

#example {
    vertical-align: top;
}
details {
    display: inline;
}

最后，必要的小提琴： http://jsfiddle.net/ambigously/cJPRz /