當我將鼠標懸停在一個元素上時，另一個都顯示的元素：inline-block，掉線了嗎？

Question

我正在處理一個有關工作人員頁面的嚴重問題。 當用戶將鼠標懸停在該元素上時，我將創建一個包含職員用戶名的按鈕，必須顯示一個社交按鈕：block 。 沒問題。 它變得可見，但是當我將鼠標懸停時，其他元素或多或少地下降了10px。

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;
}

演示