在內聯位置顯示div

Question

試圖幻燈片顯示一個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

更新的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

變化

display: inline-block; 

到

float: left; 

Answer 3

變化。社會，。社會-圖標display性質float:left。 繼承人的工作Fiddle

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