html - 两个带文本的内联 block 自动换行

Question

我有两个内联 block 样式的 div，它们都包含具有不同字体大小的文本。它们应该在同一行上，然后第二个应该断开，但只有当第二个 div 比 body 的宽度短时它们才会断开。

JSFiddle

div {
  display: inline-block;
  font-family: Arial;
}
#a {
  font-size: 30px;
  margin-right: 50px;
}
#b {
  /* No new line at b!! */
  font-size: 40px;
}

<div id="a">Fruits:</div>
<div id="b">Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)</div>

这里我说明问题:

它看起来的样子:

Fruits:
Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)

它应该的样子:

Fruits:  Banana (3), Apple (2), Kiwi (5),
         Orange (1), Pear (11)

再一次，再举一个例子，说明它不应该的样子，但如果 div 是内联的，它可以:

Fruits:  Banana (3), Apple (2), Kiwi (5),
Orange (1), Pear (11)

我能解决这个问题吗？

我尝试过使用 white-space: nowrap 和 word-wrap: break-word，但它们似乎都不起作用。

Answer 1

你可以使用display: table-cell，但是你应该使用padding而不是margin，因为:

Margin applies to all elements, except elements with table display types other than table-caption, table and inline-table.

JSFiddle

div {
  display: table-cell;
  font-family: Arial;
}
#a {
  font-size: 30px;
  padding-right: 50px;
}
#b {
  /* No new line at b!! */
  font-size: 40px;
}

<div id="a">Fruits:</div>
<div id="b">Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)</div>