如何在ngIf移除元素时保持元素固定位置并实现指定行样式？

核心思路 #

• 给按钮容器设置固定宽度+绝对定位，确保按钮位置不受其他元素显示/隐藏影响
• 文本区域不设置右侧内边距，允许长文本和按钮重叠
• 行容器设置相对定位，作为按钮容器的定位基准

代码实现 #

HTML 结构（保留原有ngIf逻辑） #

<div class="someRow">
  <div class="someText">这里是可能很长的文本内容，测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  <div class="buttonsContainer">
    <div *ngIf="someExpression1" class="button1">按钮1</div>
    <div *ngIf="someExpression2" class="button2">按钮2</div>
    <div *ngIf="someExpression3" class="button3">按钮3</div>
    <div class="button4">按钮4</div>
  </div>
</div>

CSS 样式 #

.someRow {
  position: relative; /* 作为按钮容器的定位父级 */
  padding: 8px 0; /* 行内边距，按需调整 */
  border-bottom: 1px solid #eee; /* 模拟表格行分隔线 */
  overflow: visible; /* 确保按钮不会被行截断 */
}

.someText {
  line-height: 24px; /* 和按钮高度对齐 */
  /* 不设置右侧padding，允许文本与按钮重叠 */
}

.buttonsContainer {
  position: absolute;
  right: 16px; /* 距离右侧的固定距离 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 160px; /* 固定宽度，确保按钮位置不随显示数量变化 */
  display: flex;
  gap: 8px; /* 按钮之间的间距 */
}

/* 按钮通用样式，按需调整 */
.buttonsContainer > div {
  padding: 4px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  white-space: nowrap; /* 按钮文本不换行 */
}

关键说明 #

• 按钮容器通过绝对定位固定在行的右侧，固定宽度保证即使部分按钮因ngIf隐藏，剩余按钮的位置也不会左移
• 行容器的相对定位确保按钮始终属于当前行的范围，不会偏移到其他行
• 文本区域不限制右侧空间，当表格宽度缩小、文本过长时，会自然和按钮重叠，满足需求

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