css - 内容被下推

Question

我们有一组头像放在一个容器中，我想在组的末尾添加一个加号，以便用户可以选择添加更多人，

当我添加它时，新组件被强制关闭。我看不出如何阻止这种情况发生。

工作码笔

https://codepen.io/jachno/pen/zYOLbyd

.avatar {
  color: #fff;
  background-color: #adb5bd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 50%;
  height: 48px;
  width: 48px;
}

.avatar img {
  width: 100%;
  border-radius: 50%;
}

.avatar span {
  width: 100%;
  border-radius: 50%;
}

.avatar+.avatar-content {
  display: inline-block;
  margin-left: .75rem;
}

.avatar-lg {
  width: 58px;
  height: 58px;
  font-size: 0.875rem;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
}

.avatar-group .avatar {
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
}

.avatar-group .avatar:hover {
  z-index: 3;
}

.avatar-group .avatar+.avatar {
  margin-left: -1rem;
}

<div style="padding:10px">

  <div class="avatar-group">
    <a href="#" class="avatar avatar-sm" data-toggle="tooltip" v-tooltip="'Ryan Tompson'" data-original-title="steve Hadid">
      <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/68.jpg" class="rounded-circle">
    </a>
    <a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid" v-tooltip="'Romina Hadid'"> <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle">
    </a>
    <a href="#" class="avatar avatar-sm">
      <div>
        <i class="fa fa-plus"></i>
      </div>
    </a>

  </div>
</div>
</div>

Answer 1

你必须分配 .avatar-group{display:flex} 才能让它工作

.avatar {
  color: #fff;
  background-color: #adb5bd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 50%;
  height: 48px;
  width: 48px;
}

.avatar img {
  width: 100%;
  border-radius: 50%;
}

.avatar span {
  width: 100%;
  border-radius: 50%;
}

.avatar+.avatar-content {
  display: inline-block;
  margin-left: .75rem;
}

.avatar-lg {
  width: 58px;
  height: 58px;
  font-size: 0.875rem;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
}

.avatar-group {
  display: flex;
  flex-direction: row;
}

.avatar-group .avatar {
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
}

.avatar-group .avatar:hover {
  z-index: 3;
}

.avatar-group .avatar+.avatar {
  margin-left: -1rem;
}

<div style="padding:10px">

  <div class="avatar-group">
    <a href="#" class="avatar avatar-sm" data-toggle="tooltip" v-tooltip="'Ryan Tompson'" data-original-title="steve Hadid">
      <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/68.jpg" class="rounded-circle">
    </a>
    <a href="#" class="avatar avatar-sm" data-toggle="tooltip" data-original-title="Romina Hadid" v-tooltip="'Romina Hadid'"> <img alt="Image placeholder" src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle">
    </a>
    <a href="#" class="avatar avatar-sm">
      <div>
        <i class="fa fa-plus"></i>
      </div>
    </a>

  </div>
</div>
</div>