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

Question

这个问题在这里已有答案：

• Align inline-block DIVs to top of container element 4个答案

我想要在同一条线上显示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

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 2

您可以使用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 3

在你的（.avatar）类中，只需添加此css属性（vertical-align：top;），例如

.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);
    vertical-align: top; /* only this property */
}