代码之家 › 专栏 › 技术社区 › Eric Conner

将文本内容添加到div会导致内联块项被撞坏[重复]

flexbox css html

Eric Conner · 技术社区 · 7 年前

我试图在同一行上显示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>

2 回复 | 直到 7 年前

Suresh Ponnukalai 7 年前

inline-block 默认对齐方式为 baseline ,这就是它与底部对齐的原因。你必须申请 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);
}
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>

sol 7 年前

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