在內聯位置顯示div

Question

試圖滑動顯示一個div但似乎有一個抖動或div不會內聯由於顯示：塊或其他東西。 我想要的是當我點擊“分享”按鈕時，帶有社交圖標的div會在“共享”按鈕旁邊順暢顯示。 有人請說清楚。 提前致謝。

Codepen： http ：//codepen.io/rezasan/pen/XjgppW

下面的代碼段示例

  $('.social').click(function(){ $('.social-icons').toggle("slide"); }); 

  .social { display: inline-block; height: 47px; color: #58585b; text-transform: uppercase; font-size: 14px; line-height: 47px; padding: 0px 20px; border: 1px solid rgba(88,88,91,0.5); transition:width .2s ease; -webkit- transition:width .2s ease; } .social-icons { display: inline-block; height: 47px; color: #58585b; font-family: "freight-text-pro",sans-serif; text-transform: uppercase; font-size: 14px; line-height: 47px; padding: 0px 20px; border: 1px solid rgba(88,88,91,0.5); margin-left: -5px; display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="social"> <a>SHARE</a> </div> <div class="social-icons"> <a>FB</a> <a>TW</a> <a>G+</a> <a>WS</a> </div> 

Answer 1

使用Float:left更新Css Float:left 。

 $('.social').click(function(){ $('.social-icons').toggle("slide"); }); 

 .social { display: inline-block; height: 47px; color: #58585b; text-transform: uppercase; font-size: 14px; line-height: 47px; padding: 0px 20px; border: 1px solid rgba(88,88,91,0.5); transition: width .2s ease; float: left; } .social-icons { display: inline-block; height: 47px; color: #58585b; font-family: "freight-text-pro",sans-serif; text-transform: uppercase; font-size: 14px; line-height: 47px; padding: 0px 20px; border: 1px solid rgba(88,88,91,0.5); /* margin-left: -5px; */ display: none; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="social"> <a>SHARE</a> </div> <div class="social-icons"> <a>FB</a> <a>TW</a> <a>G+</a> <a>WS</a> </div> 

Answer 2

將.social，.social-icons的display屬性更改為float:left 。 繼承人工作小提琴

Answer 3

更改

display: inline-block;

至

float: left;

Answer 4

我並不是說我同意你的技術，但這應該可以解決問題：

.social{
  display: block;
  width:46px;
  height: 47px;
  color: #58585b;
  font-family: "freight-text-pro",sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 47px;
  padding: 0px 20px;
  border: 1px solid rgba(88,88,91,0.5);
  transition:width .2s ease;
  -webkit- transition:width .2s ease;
  float:left;
}

.social-icons{
  display:none;
  width:100px;
  height: 47px;
  color: #58585b;
  font-family: "freight-text-pro",sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 47px;
  padding: 0px 20px;
  border: 1px solid rgba(88,88,91,0.5);
  margin-left: 88px;
}