html - 如何避免使用 `inline-block` 元素换行

Question

使用以下代码，

CSS

.inline{display: inline-block;}

HTML

<div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
</div>

我打算避免在   处换行(在 "X" 和以下带有 "Foo 的 div 项之间) ")(但允许在带有 "Foo" 的 div 项和后面的 "X" 之间换行)。

作为this demo显示，换行实际上可能发生。这是为什么？

在这种情况下如何避免换行？

Answer 1

    <style>
.inline{display: list-item;}

</style>

<div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
</div>



<div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
</div>

你可以使用 Like this 并且它对我有用