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

Question

我想列出某个元素包含的多个类别。每个类别都显示在引导徽章中。它应该看起来像这样:

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

Answer 1

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

我将 Plunker 编辑为如上所示。

这是我更改的版本:http://plnkr.co/edit/5Wk1jDOgKUg7f0uEj4wM?p=preview