Question

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

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

使用无序列表显示类别，每个元素以内联方式显示。

当调整窗口大小时出现问题，“categories-list-div”弹出到“另外在：”文本下面的新行。首选行为是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

Answer 2

您可以使用flexbox，查看下面的简化代码段。

.container {
  display: flex;
  width: 300px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 8px;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.item {
  margin: 0 4px 4px 0;
  background: aqua;
}

<div class="container">
  Also In:
  <ul class="list">
    <li class="item">sport</li>
    <li class="item">health &amp; fitness</li>
    <li class="item">lifestyle</li>
    <li class="item">cardio</li>
    <li class="item">biomechanics</li>
    <li class="item">pottery</li>
  </ul>
</div>

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

2 个答案: