显示内联位置的 div答案

【问题标题】：Reveal div in inline position显示内联位置的 div
【发布时间】：2016-09-28 04:12:59
【问题描述】：

试图滑动显示一个 div，但由于 display:block 或其他原因，似乎存在抖动或 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>

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

使用Float:left更新Css。

$('.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>

【讨论】：

【解决方案2】：

将 .social,.social-icons 的 display 属性更改为 float:left。这是工作的Fiddle

【讨论】：

【解决方案3】：

改变

display: inline-block;

到

float: left;

【讨论】：

【解决方案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;
}

【讨论】：