Question

我的目标是创建一个可以输入内容的表单，然后单击“添加”，它将显示在右侧的框中。

我已在一个部分创建了一个表单，并将该框放在一边。正如我认为的那样，我已经设计了它们，但是旁边总是低于表格的末尾。表格越多，一边说的就越多。我总是希望它在右上方。

我无法弄清楚我做错了什么。我创建了一个重新创建问题的stackblitz：https://stackblitz.com/edit/angular-wjwsj8。

我的styles.css：

aside {
  border: 1px solid #6495ED;
  float: right;
  margin-top: 0px;
  width: 200px;
}

我的HTML模板：

<h3>Toppings</h3>
<section>
  <label>Pizza Topping
    <input [(ngModel)]="currentTopping" placeholder="Pizza Topping">
  </label>
  <button mat-raised-button (click)="onAddClick()">Add</button>
  <p class="error">{{message}}&nbsp;</p>
  <button mat-raised-button (click)="onApplyClick()">Apply</button>
</section>

<aside>
  <p *ngFor="let aTopping of settingsService.toppings">{{aTopping}}</p>
  <p *ngFor="let aTopping of settingsService.newToppings" class="ghostText">{{aTopping}}</p>
</aside>

Answer 1

感谢@Ylama。我添加了

section {float: left;}

我的风格，并修复了问题。我知道它必须是简单的，但我无法弄明白。

除了div在页面底部而不是右边

1 个答案: