当使用innerHTML将<details>元素附加到div时，div也会“向下”</details>

Question

问题很容易通过示例here进行描绘。

代码如下：

HTML：

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

JS：

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

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

我希望当你点击“世界”时，“你好”会保持原位。

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

Answer 1

为vertical-align: top设置#example似乎可以获得我认为您想要的布局。 HTML：

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

CSS：

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

最后，强制性的小提琴：http://jsfiddle.net/ambiguous/cJPRz/