如何从按钮水平创建功能[关闭]

Question

现在，当我单击“添加产品按钮”时，产品表单出现在上一个产品下方。有没有办法让它水平显示，而不是垂直显示？我在 Typescript 中定义了我的 addNewProduct 函数，但我在 HTML 中调用它。我应该在哪里更改它的显示方式？

Answer 1

框是块元素，因此为什么垂直显示。您必须将框的 CSS 属性设置为“display: inline-block”。

Answer 2

弹性盒子非常适合这种情况。在所有 product1、product2 框的父 div 上使用样式 display: flex。

如果您添加了更多框，使其比您的屏幕/父 div 更宽，它将继续。如果你想让它在宽的情况下换行，请在父 css 上使用 css flex-wrap: wrap。

如果高度不同，您也可以使用父类上的 css align-items: center 将所有产品框水平居中对齐。

html 文件：

    <button class="button" (click)="addProduct()">Add product</button>
    <div class="parent">
      <div *ngFor="let product of products, let i = index" class="child">
         <h5>Product {{i+1}}</h5>
         <p>Sales price</p>
         <input [(ngModel)]="product.price" \>
      </div>
    </div>

css 文件：

.parent {
   display:flex;
   flex-wrap: wrap; // use this to make it break to a new line, if all the childs are wider than the parent;
   align-items: center; // use this to align the product boxes center horizontally if they are not of same height
}

.child {
   margin: 10px;
   border: 1px solid black; // same border color as your example
}

.buttonContainer {
  margin-right: 20px;
}
.button {
  color:white;
  background-color:blue;
}