如何使用angular的* ngFor]连续显示项目>

问题描述 投票：0回答：2

我正在尝试将项目显示为一行而不是一列。请参见下面的代码和图片。我试图在网上寻找解决方案，但其他所有人都在要求不同的用例。请告诉我。谢谢！

enter image description here

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

我正在尝试将项目显示为一行而不是一列。请参见下面的代码和图片。我试图在网上寻找解决方案，但其他所有人都在要求不同的用例。请让我...

javascript css arrays angular ngfor
2个回答
1
投票

我认为这不是一个有角度的问题。您需要管理CSS才能使技能显示在Flex或网格中。

0
投票

您可以在此处使用css flexbox模式。尝试将类添加到<p>标记中并为其提供以下属性

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.