スパン要素の折り返し防止

Question

UIには、バックボーンによって取得された電子メールアドレスのリストが表示されます。現在、spanを含むspanがspanでレンダリングされています。ここではいくつかの典型的な生成されたHTMLです：

は、しかし、私はulとli音（私が間違ってhtmlタグを使用していますおそらくので、spanの内部の休憩を取得（angelstwoの始まりは2行にある注意）していますリストの方が良い）。それは次のようになります。

を私はdivのを試してみましたが、私は1行につき1つのエントリを持って、私はそれを望んでいません。

spanでこの作業を行うためにできることはありますか？あるいは、ulとliのようなものに変更する必要がありますか？

Answer 1

span要素は、デフォルトでは、インライン要素です。 インライン書式設定のコンテキストでは、ボックスを折り返すことができます。 （これは、テキストがフローティングされたイメージを囲むときにテキストに起こることです）。

div要素は、デフォルトでブロック要素です。 ブロック書式設定コンテキストでは、ボックスは利用可能なすべての水平スペース（width: 100%）を占有します。

これは、あなたのスパンとdivがあなたの望むように機能しない理由です。

display: inlineからdisplay: inline-blockに切り替えるとブロックレベルのような動作になります。これによりラインボックスの折り返しが防止されますが、要素は他のインライン要素と水平に積み重ねられます。

W3C参考文献：

• 9.2.2 Inline-level elements and inline boxes
• 9.2.1 Block-level elements and block boxes