如何将Edit文本对齐至输入框右下方？输入框初始禁用需点击启用

布局对齐解决方案 #

你的核心问题是元素对齐，用Flex布局就能轻松搞定。给父容器设置display: flex和align-items: flex-end，就能让输入框和Edit文本底部对齐，再通过margin-left调整两者的间距。

完整实现代码 #

HTML部分

<div class="mtop-8 input-group">
  <input 
    placeholder="Code" 
    [(ngModel)]="typedCode" 
    [disabled]="isDisabled"
  />
  <a (click)="toggleEdit()"> {{ isDisabled ? 'Edit' : 'Save' }} </a>
</div>

CSS部分

.input-group {
  display: flex;
  align-items: flex-end; /* 让元素底部对齐 */
}

.input-group a {
  margin-left: 8px; /* 调整输入框与文本的间距，可按需修改 */
  cursor: pointer; /* 加上鼠标手势提升交互体验 */
}

组件逻辑（Angular TS）

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  typedCode: string = '';
  isDisabled: boolean = true; // 初始禁用输入框

  toggleEdit() {
    this.isDisabled = !this.isDisabled;
    // 如果需要在切换时做其他操作，比如保存逻辑，可在这里添加
  }
}

关键说明 #

• display: flex + align-items: flex-end：让父容器内的子元素（输入框和a标签）沿垂直方向底部对齐，直接解决之前文本偏下的问题
• margin-left：控制Edit文本与输入框的横向间距，数值可根据视觉需求调整
• 禁用切换逻辑：通过[disabled]绑定isDisabled变量，点击文本时切换状态，同时动态切换显示文本（Edit/Save）

内容的提问来源于stack exchange，提问作者Tommy Kiroto