防止span元素包裹

Question

我的用户界面显示了骨干网检索到的电子邮件地址列表。它目前呈现为包含span的{​​{1}} span个span。这是一些典型的生成html：

但是我在span内部得到了休息（注意天使的开头是两行），可能是因为我使用了错误的html标签（ul和li声音更好的列表）。它看起来像这样：

我试过了div但是我每行都有一个条目，我不希望这样。

我可以做些什么来使这项工作与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