Lors de l'ajout d'un élément <details> à un div avec innerHTML, le div descend également

Question

Le problème est facilement représenté avec un exemple here.

Le code va comme ceci:

HTML:

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

JS:

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

Le problème est que lorsque je clique sur "World", "Something" apparaît mais " Bonjour "descend également, comme ceci:

Je voudrais que lorsque vous cliquez sur "Monde", "Bonjour" reste en position.

Des suggestions? Merci d'avance!

Answer 1

Le réglage vertical-align: top pour #example semble obtenir la disposition que je pense que vous voulez. Le code HTML:

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

Et le CSS:

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

Et, enfin, le violon obligatoire: http://jsfiddle.net/ambiguous/cJPRz/