html - 即使在使用 CSS 添加列表元素后，修复图像右下角的位置

Question

即使在列表 (li) 中添加元素后，我也想“修复”右下角的图像(铅笔)。目前，当我在列表中添加文本时，图像(铅笔)向下移动，这不是我想要的。请提出建议。

HTML:

<div class="notes">
  <h3>Notes</h3>
  <div class="notes-content">
    <div *ngIf="showNotes">
      <ul>
        <li *ngFor="let note of notesList">
          <span>{{note}}</span>
        </li>
        <li>
          <input type="text" name="newNote" placeholder="Type here" [(ngModel)]="newNote" />
        </li>
      </ul>
    </div>
    <div class="addNoteBtn">
      <img src="../../common/images/edit-note1.png" alt="Add Note" (click)="addNote()"/>
    </div>
  </div>
</div>

CSS:

.notes {
  margin-top: 20px;
  margin-left: 20px;
  h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
  }
  .notes-content {
    border: 1px solid #FFFFFF;
    border-radius: 3px;
    box-shadow: inset 2px 2px 3px 0 #FFFFFF;
    height: 150px;
    ul {
      padding-top: 10px;
      list-style-type: inherit;
      li input {
        background-color: #171717;
        border: none;
        &:focus {
          outline: none;
        }
      }
    }
    .addNoteBtn {
      float: right;
      margin-top: 15px;
      img {
        cursor: pointer;
      }
    }
  }
}

组件:

  name:string;
  notesList: Array<string> = [];
  newNote: string = '';
  show: boolean = false;
  constructor() {
    this.name = 'Angular2'
    this.notesList = ['a', 'b', 'c'];
    this.show = true;
  }

  addNote(): void {
    this.notesList.push(this.newNote);
  }

示例 Plunker:

https://plnkr.co/edit/cFi75ggSA8nESetupOo5

Answer 1

您可以在容器 .notes-content 上添加一个relative 位置。

并在您的图片上添加一个绝对位置。

.notes-content {
  position:relative;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 2px 2px 3px 0 #FFFFFF;
}

.addNoteBtn {
  position:absolute;
  bottom:5px;
  right:5px;
}

Demo