html - 调整大小后，无序列表显示内联跳转到新行

我想列出一个项目所包含的许多类别。每个类别都显示在引导徽章中。应该是这样的：

Also In: sport, health & fitness, lifestyle, cardio, biomechanics, pottery

类别使用无序列表显示，每个元素都以内联方式显示。
当调整窗口大小时，“categories list div”会弹出到“Also In:”文本下面的一行。首选的行为是div保持在一行中，而要包装的元素看起来像这样：

 Also in: sport, health & fitness, lifestyle, cardio, biomechanics,
          pottery

相反，它看起来是这样的：

Also in:
sport, health & fitness, lifestyle, cardio, biomechanics, pottery

有什么办法让它工作吗？我创建了一个plnkr来向您显示正在发生的事情：http://plnkr.co/edit/42ZLWgfISBfMWXvoSAhR
html如下所示：

<div class="categories-div">
  Also In:
  <div class="categories-list-div">
    <ul class="category-list">
      <li class="category-list-item">
        <span class="badge badge-category">sport</span>
      </li>
      <li class="category-list-item">
        <span class="badge badge-category">fitness</span>
      </li>
    </ul>
  </div>
</div>

div、ul和li元素的CSS是：

.categories-list-div {
    display:inline-block;
}
.category-list {
    margin-left:0px;
    list-style:none;
    padding-left:0;
}
.category-list-item {
    display: inline;
}

最佳答案

...
<div style="float:left; width: 50px;">Also in:</div>
<div class="categories-div" style="float:left; width: calc(100% - 50px);">
    <div class="categories-list-div">
    <ul class="category-list">
      <li class="category-list-item">
        <span class="badge badge-category">sport</span>
      </li>
...

我编辑了你上面看到的劫掠者。
这是我的更改版本：http://plnkr.co/edit/5Wk1jDOgKUg7f0uEj4wM?p=preview