html - 追加する場合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

の設定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/