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”会弹出到“也在：”文本下方的新行。首选的行为是保持直线的div，以及环绕的元素，看起来像这样：

<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 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>

也在：
运动、健康和健身、生活方式、有氧运动、生物力学、陶器

有什么办法让它工作吗？我创建了一个plnkr，向您准确展示正在发生的事情：

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>

。。。
还包括：


运动

...

我对Plunker进行了编辑，使其如上图所示

---

这是我修改过的版本：

这确实防止了行的跳跃，但是放在新行上的元素直接放在“也在”文本下，而不是放在第一个类别名称下……哎呀，我错过了这个微妙之处，Iv'e编辑了我的回复以实现这一点。