html - 当我悬停一个元素时，另一个都显示为 : inline-block, 的元素会下降吗？

Question

我在处理员工页面时遇到了一些严重的问题。当用户悬停该元素时，我制作了一个包含员工用户名的按钮，社交按钮必须是display:block。这没有问题。它变得可见，但当我将鼠标悬停时，另一个元素或多或少会向下移动 10 像素。

jsbin: https://output.jsbin.com/tozemihefu/

我会感谢你的帮助。

---

代码片段:

.yetkili {
  display: inline-block;
  padding: 10px 25px;
}
.yetkili img {
  border-radius: 100%;
  padding-bottom: 10px;
}
.yetkili div ul {
  display: none;
  list-style: none;
}
.yetkili div ul li {
  font-size: 10px;
  color: white;
}
.yetkili div {
  transition: all 0.3s ease;
  border: 3px solid #bbcada;
  padding: 5px 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 16px;
  color: #5C7A99;
  font-family: 'Montserrat', sans-serif;
  display: block;
  text-decoration: none;
}
.yetkili div:hover ul {
  display: block;
}
.yetkili div:hover {
  transition: all 0.3s ease;
  border: 3px solid #bbcada;
  background-color: #bbcada;
  padding: 5px 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 16px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  display: block;
  text-decoration: none;
}
h1 {
  font-family: 'Montserrat', sans-serif;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top: 1%;">
  <div class="row text-center">
    <div class="col-sm-12 text-center">
      <h1 class="anaheader">Kurucular</h1>
    </div>
    <div class="col-md-offset-3 col-md-6">
      <div class="yetkili">
        <img src="https://minotar.net/helm/AtomTR/128.png">
        <div>AtomTR
          <ul>
            <li>asd</li>
          </ul>
        </div>
      </div>
      <div class="yetkili">
        <img src="https://minotar.net/helm/RepublicanSensei/128.png">
        <div>RepublicanSensei
          <ul>
            <li>asd</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以将vertical-align: top 添加到容器中:

.yetkili{
    display: inline-block;
    padding: 10px 25px;
    vertical-align: top;
}

DEMO