一个关于格式化HTML5内联块元素的问题:两个短的内联块元素（比一行短）整齐地包装在一起在单行中。 如果它们比一行长，则在它们之间插入了一个换行符，这会破坏我的布局。 假设我有这样HTML
<!DOCTYPE html>
<html>
<head>
<style>
.my-div {font-size: 0;}
.my-span { display: inline-block; font-size: 17px; line-height: 1.4em; }
.a { background-color: Aquamarine; }
.b { background-color: LightPink; }
.c { background-color: LightSteelBlue; }
</style>
</head>
<body><div class="my-div">
<span class="my-span a">Pellentesque eget dolor eu est finibus tincidunt. Suspendisse dapibus pellentesque mauris ac iaculis. Sed tincidunt rutrum massa quis blandit. Integer rhoncus scelerisque justo eu dapibus. Nam varius eros velit, ut feugiat mauris posuere eu. Aliquam justo nibh, pulvinar vel ipsum sed, euismod placerat nulla. </span><span class="my-span b">Vestibulum blandit erat nec sodales vestibulum. Proin nulla est, feugiat dapibus risus dignissim, egestas pulvinar magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ut aliquet velit. Donec sodales euismod arcu, eget pulvinar est convallis id. Suspendisse potenti. </span><span class="my-span c">Aenean imperdiet nisi tristique est tincidunt, eget gravida augue porta. Sed mauris risus, consectetur eget convallis sed, maximus eu turpis. Donec ultricies mattis accumsan. Sed posuere ex bibendum, cursus odio sit amet, tincidunt lacus. </span><span class="my-span a">Short text </span><span class="my-span b">More Short text</span>
</div>
</body>
</html>
如有任何帮助，我们将不胜感激。
内联块元素的宽度由其内容自动确定。 当第一个跨度元素占据行的最大宽度时，第二个元素被包裹到下一行，并且与第三个跨度相同。 最后两个元素在同一条线上，因为它们有足够的空间来占据。
一个简单的解决方案是将display:inline-block更改为display:inline
将“my-span”类的display属性更改为inline。
display: inline;
但线高将不适用。
