如何在文本区域右侧添加图标列表

Question

我想要做的是在文本区域右侧添加 3 个图标。文本区域将是文本区域的列表，因此每一行都将具有文本区域 -> 图标的组合

我的文本区域和图标在右侧，但我需要它们看起来像照片

<ng-template #item let-item let-index="index">
    <nz-row>
        <textarea disabled="true" id="CommentBox_{{ index }}" [(ngModel)]="item.commentText" nz-input rows="4"></textarea>
        <button nz-button nzGhost>
            Edit
        </button>
        <button nz-button nzGhost>
            Delete
        </button>
        <button nz-button nzGhost>
            Save
        </button>
    </nz-row>
</ng-template>  

    

Answer 1

HTML

<ng-template #item let-item let-index="index">
  <nz-row class="comment-row">
    <div class="container">
      <div class="textarea-container">
        <textarea disabled="true" id="CommentBox_{{ index }}" [(ngModel)]="item.commentText" nz-input rows="4"></textarea>
      </div>
      <div class="icon-container">
        <ul class="icon-list">
          <li>
            <button nz-button nzGhost class="edit-icon">
              Edit
            </button>
          </li>
          <li>
            <button nz-button nzGhost class="delete-icon">
              Delete
            </button>
          </li>
          <li>
            <button nz-button nzGhost class="save-icon">
              Save
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nz-row>
</ng-template>

CSS：

.comment-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.container {
  display: flex;
  align-items: flex-start;
}

.textarea-container {
  margin-right: 10px; /
}

.icon-container {
  display: flex;
  flex-direction: column;
}

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-list li {
  margin-bottom: 5px; 
}

textarea {
  width: 100%;
}