如何使用 angular 的 *ngFor 内联显示项目
How to display items inline using angular's *ngFor
我正在尝试内联显示项目而不是出现在不同的行中。请看下面的代码和图片。我试图在网上寻找解决方案,但其他人都在问不同的用例。请告诉我。谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<span class="borderStyle">
Kenny's Site
</span>
</div>
</div>
<section class="section section-light">
<h2>Skills</h2>
<p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="borderStyle">
Image2 Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="borderStyle">
Image3 Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="borderStyle">
Kenny's Site
</span>
</div>
</div>
</div>
</body>
</html>
我认为这不是 angular 问题。
您需要管理 css 才能使技能显示在 flex 或网格中。
也许你可以尝试在一个div容器中制作所有技能,然后灵活运用。
html :
<section class="section section-light">
<h2>Skills</h2>
<div class="skill-list">
<p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
</div>
</section>
css :
.skill-list{
display : flex;
justify-content: between;
}
您可以使用 css flexbox 模式 here.Try 添加 class 到您的 <p>
标签并赋予它们以下属性
.<your class name> {
display: flex;
flex-wrap: nowrap;
}
if you don't want to mess around that much with CSS attributes you should have a look at [@angular/flex-layout][1]
[1]: https://github.com/angular/flex-layout
1. Rows made like this:
<div fxLayout="row wrap">
<div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="start center">
</div>
<div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="end center">
</div>
</div>
2. Columns made like this:
<div fxLayout="column wrap">
<div fxFlex="50%" fxLayoutAlign="start center">
</div>
<div fxFlex="50%" fxLayoutAlign="end center">
</div>
</div>
[fxFlex.lt-md] makes the styling responsive, depending on your current user's viewport. There are *.lt-sm, *.lt-md and also *.gt-sm and so on...
And you may use on any flexLayout directives like "fxLayoutAlign" and others...
我正在尝试内联显示项目而不是出现在不同的行中。请看下面的代码和图片。我试图在网上寻找解决方案,但其他人都在问不同的用例。请告诉我。谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<span class="borderStyle">
Kenny's Site
</span>
</div>
</div>
<section class="section section-light">
<h2>Skills</h2>
<p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="borderStyle">
Image2 Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="borderStyle">
Image3 Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="borderStyle">
Kenny's Site
</span>
</div>
</div>
</div>
</body>
</html>
我认为这不是 angular 问题。 您需要管理 css 才能使技能显示在 flex 或网格中。
也许你可以尝试在一个div容器中制作所有技能,然后灵活运用。
html :
<section class="section section-light">
<h2>Skills</h2>
<div class="skill-list">
<p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
</div>
</section>
css :
.skill-list{
display : flex;
justify-content: between;
}
您可以使用 css flexbox 模式 here.Try 添加 class 到您的 <p>
标签并赋予它们以下属性
.<your class name> {
display: flex;
flex-wrap: nowrap;
}
if you don't want to mess around that much with CSS attributes you should have a look at [@angular/flex-layout][1]
[1]: https://github.com/angular/flex-layout
1. Rows made like this:
<div fxLayout="row wrap">
<div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="start center">
</div>
<div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="end center">
</div>
</div>
2. Columns made like this:
<div fxLayout="column wrap">
<div fxFlex="50%" fxLayoutAlign="start center">
</div>
<div fxFlex="50%" fxLayoutAlign="end center">
</div>
</div>
[fxFlex.lt-md] makes the styling responsive, depending on your current user's viewport. There are *.lt-sm, *.lt-md and also *.gt-sm and so on...
And you may use on any flexLayout directives like "fxLayoutAlign" and others...