我无法让组件在 Angular2 中显示为内联块答案

【问题标题】：I can't get a component to display as inline-block in Angular2我无法让组件在 Angular2 中显示为内联块
【发布时间】：2019-08-12 21:31:44
【问题描述】：

在我的 Angular2 应用程序中，我有一个父组件，它通过 ngFor 循环生成多个子组件的实例 - app-video-container - 它本质上是一个内部带有 iframe 的 div。我希望这些视频以网格类型的布局显示。我正在尝试使用 inline-block 来完成此操作，如下所示，但它不起作用，它只是显示为一列视频。如果我使用 float:left 而不是 inline-block，则会以我想要的方式在网格中显示视频，但我需要能够使用 inline-block 来代替。我究竟做错了什么？为什么浮动有效但内联块无效？这是我的代码的精简/简化版本：

父组件 HTML：

<div *ngFor="let video of videos">
   <app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>

父组件的CSS

:host {
     background-color:black;
     position:relative;
 }

App-video-container 组件 HTML：

<div class="videoContainer">
    <iframe [src]="videoURL" allowfullscreen></iframe>
</div>

App-video-container 组件 CSS

.videoContainer {
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
}

【问题讨论】：

尝试改用display: flex。

标签： css angular

【解决方案1】：

inline-block 没有按您预期的方式工作，因为每个 .videoContainer div 周围都有一个 div。

从内部 div 中移除 videoContainer 类

<div>
    <iframe [src]="videoURL" allowfullscreen></iframe>
</div>

并将其添加到外部 div

<div class="videoContainer" *ngFor="let video of videos">
   <app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>

【讨论】：