Question

我对我的搜索输入产生了影响，当它将其点差集中在100％宽度并且平滑过渡时，但是他也会推送其他li元素并且他们不会很好＆＃39;动画＆＃39 ;.他们只是跳了起来。远离搜索输入。

我的HTML：

<div class="navigation">
  <div class="col-lg-6 col-xs-12">
     <ul>
        <li><a href="#" class="hover-effect">Home</a></li>
        <li><a href="#" class="hover-effect">About</a></li>
        <li><input type="search" name="search" placeholder="Search..."></li>
      </ul>
  </div>
</div>

我的CSS：

.navigation {
    text-align: right
}

.navigation ul {
    list-style: none;
    margin-top: 22px;
}

.navigation li {
    display: inline-block;
    font-size: 20px;
    padding-right: 12px;
}

.navigation li a {
    color: #d3d5d7;
    text-decoration: none;
    transition: color 1s;
}

.navigation li a:hover {
    color: #2980b9;
}
input[type=search] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('../images/searchicon.png');
    background-position: 10px 14px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.6s;
    transition: width 0.6s;
}

input[type=search]:focus {
    width: 100%;
}

有任何建议如何解决这个问题？

我也做了代码扩展：codepan.io

Answer 1

这是因为它位于<li>内，通常不是您希望<input>所在的位置。您可以将它放在<ul>之外并浮动它，或以不同的方式放置它。这样就可以正确推送内容。

我在这里为你设置了一个快速的小提琴，它有点粗糙，但它显示了它应该显示的内容。 https://jsfiddle.net/176hxsuj/

如果您确实需要<li>，请为<li>而不是<input>设置动画。

如何解决动画问题css3

1 个答案: