向div添加文本内容会导致内联块项目崩溃

Question

我正在尝试将4个圆圈图像显示在同一条线上，最后一个圆圈包含一位数字。我有以下代码接近，但最后一个圆圈通过文本得到了一点点。我不明白为什么圆圈会被撞倒。

感谢您的帮助。

.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}
li:nth-child(n+2) { margin-left: -20px; }

<ul>
  <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>

Answer 1

您可以使用vertical-align属性。信息here。

.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
  /* added */
  vertical-align: top;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}

li:nth-child(n+2) {
  margin-left: -20px;
}

<ul>
  <li>
    <div class="avatar"></div>
  </li>
  <li>
    <div class="avatar"></div>
  </li>
  <li>
    <div class="avatar"></div>
  </li>
  <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>

Answer 2

inline-block默认对齐方式为baseline，这就是它与底部对齐的原因。您必须将vertical-align:top应用于inline-block元素才能使其对齐。

.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align:top;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}
li:nth-child(n+2) { margin-left: -20px; }

<ul>
  <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>

Answer 3

在你的（.avatar）类中添加这个css属性（vertical-align：top;） e.g

viewWillAppear