<button (click)="displayInput()">显示输入内容</button> <button (click)="clearInput()">清除</button>怎么把这俩按钮变成竖着排列的？现在是一个横排

如果你想将这两个按钮垂直排列，而不是水平排列，可以采用CSS布局技术，例如Flexbox或者Grid。以下是使用Flexbox的方式：

首先，在你的HTML模板上添加一个包含这两个按钮的容器元素，并给它一个特定的类名，比如`.button-container`。

<div class="button-container">
  <button (click)="displayInput()">显示输入内容</button>
  <button (click)="clearInput()">清除</button>
</div>

接下来，为`.button-container`设置Flexbox样式，使其变为垂直方向排列：

.button-container {
  display: flex; /*启用Flexbox模式 */
  flex-direction: column; /*指定主轴（默认为横向）为纵向*/
  justify-content: center; /*居中对齐子元素*/
  align-items: center; /*交叉轴（默认为垂直）居中对齐子元素*/
  height: enoughSpaceToFitButtons; /*设置容器高度以便容纳两个按钮，视具体需求调整*/
}

这里假设`enoughSpaceToFitButtons`是你需要计算的高度，确保能容纳两个按钮。你可以根据实际设计调整`justify-content`和`align-items`的值，比如如果想要顶部对齐，可以使用`align-items: flex-start`。

如果你使用的是Angular Material或其他UI库，它们通常会有现成的按钮组组件，可以按照文档说明配置为垂直布局。