<details>要素をinnerHTMLのdivに追加すると、divも "down"になります

コードは次のようになります：

HTML：

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

JS：私は "世界" をクリックしたとき

が

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

問題は、 "何か" が表示されていることが、 "こんにちは "もこのように下がります：

enter image description here

「ワールド」をクリックすると、「こんにちは」の位置にとどまります。

提案がありますか？前もって感謝します！

2011-07-16 Trufa

私はので詳細要素のこの質問のHTML5のタグを付けていますが、私は100ありませんよタグが適切であることを確認してください。提案/編集して削除してください。ありがとう！ – Trufa

あなたはどのブラウザを使用していますか？私はSafariとFirefoxの両方で1行にまとめました。 –

@muistooshort：google-chrome私はそれが他の多くのブラウザで動作するとは思わない。しかし、試していない！ – Trufa

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

2011-07-16 06:56:41

それはうまくいくようです！ありがとうございました！私はちょうど私の実際の例にそれを取る方法を理解しようとしています... – Trufa

遅れて申し訳ありません。答えをありがとう！ – Trufa

@Trufa：申し訳ありませんが、私はなぜそれが動作するかについてまともな説明がありません。 "それが動作するまでそれを持つバイブル"テクニックは私に少し不安を感じさせる。 –

答えて