Question

我正在尝试将内联div放在第一行中。我没有内联它们。

如果有人可以向我展示如何实现这一目标，我将不胜感激。这是stackblitz示例：https://stackblitz.com/edit/angular-ry9yry

<mat-grid-list cols = "4" rowHeight = "80px">
   <mat-grid-tile 
   [colspan] = "4"
   [rowspan] = "1">

<div fxLayout="row inline" fxLayoutAlign="space-around center" >
  <div fxFlex="25"> 1. One</div>
  <div fxFlex="25">2. Two</div>
  <div fxFlex="25">3. Three</div>
  <div fxFlex="25">4. Four</div>
</div>

  </mat-grid-tile>
     <mat-grid-tile
   [colspan] = "4"
   [rowspan] = "1">date
  </mat-grid-tile>
  <mat-grid-tile 
   [colspan] = "2"
   [rowspan] = "1">item
</mat-grid-tile>
<mat-grid-tile 
   [colspan] = "2"
   [rowspan] = "1">variation
   </mat-grid-tile>
<mat-grid-tile 
   [colspan] = "4"
   [rowspan] = "1">summary
  </mat-grid-tile>
</mat-grid-list>

Answer 1

您可以使用flexbox代替fxLayout设置样式：

div{
 display: flex;
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

评论后编辑：

如果您想使用fxLayout，则问题在于它尚未安装在您的应用程序中。为此，您需要执行以下步骤：

安装：

npm install @angular/flex-layout @angular/cdk --save

导入模块：

import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
// other imports 
@NgModule({
 imports: [FlexLayoutModule],
 ...
})
export class YourAppModule {}

https://github.com/angular/flex-layout/wiki/Using-Angular-CLI

要比较上述解决方案，请检查由亚历山大·斯塔索塞尔斯基（Alexander Staroselsky）添加的注释波纹管

如何使用角形材质放置内嵌div？

1 个答案: