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

Posted 2023-02-23

【中文标题】如何从按钮水平创建功能[关闭]

【英文标题】：How to create a feature Horizontally from button [closed]

【发布时间】：2021-05-11 14:16:19

【问题描述】：

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

【参考方案1】：

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

【讨论】：

我试过了，没用。我的盒子是一个组件类，我不确定这是否会改变任何东西。我使用了 Angular，并在组件内部定义了一个 templateUrl，其中包含每次单击按钮时都会重新生成的 html 文件。

【参考方案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;

【讨论】：

谢谢！这有助于使盒子水平放置。但是，我的按钮也向下移动到与框相同的行。如何将按钮保持在框顶部的一行？

将按钮移到带有父类（具有 display:flex 的那个）的 div 之外。我更新了代码以匹配。

谢谢！这样可行。抱歉有这么多问题，但我如何编辑css以使框出现一些空格？现在它们似乎相互连接。