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

我想列出项目所包含的许多类别。每个类别都显示在引导徽章中。它应该看起来像这样：无序列表显示在调整大小时内联跳转到新行

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的CSS，UL和李要素是：

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

来源

2015-10-10 Tom O' Brien

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

来源

2015-10-10 18:19:45

那确实保持从跳线，但被提上了新的生产线的元素直接去下“同样在：”下的第一个类别名称的文本，而不是.. –

哎呦，我错过了这个微妙之处，Iv'e编辑了我的回应以实现这一点。 –

您可以使用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>

来源

2015-10-10 18:49:01 Stickers

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

回答

相关问题