li标签中的隐藏div

Question

我有一个菜单图标。当我单击搜索图标时，会出现一个隐藏的输入表单供搜索。问题是，当我点击图标时，表单会在右侧快速滑动，但图标图像会下降并且不会被修复。

这是我在工作人员主题的函数中创建的函数.php：

＆＃13;

＆＃13;

<ul class="icone">
    <li><div class="search-lens"><?php get_search_form(); ?></div><a class="search-click" href="#"><img src="image.png"></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这是javascript函数：

＆＃13;

＆＃13;

jQuery(document).ready(function() {	
    jQuery(".search-click").click(function(){
        jQuery(".search-lens").toggle('fast');
    });

＆＃13;

＆＃13;

＆＃13;

这是自定义css代码：

＆＃13;

＆＃13;

.icone{
    width:15%;
    margin:10px auto;
    position:relative;
}
.icone li{
    width:45px;
    float:left;
    margin-left:10px;
    list-style:none;
}

form.search-form{
    float:left;       
}

div.search-lens {
    display:none;
    float:left;
    margin-left:50px;
}

＆＃13;

＆＃13;

＆＃13;

那么当我点击它时如何避免图标滑落？

Answer 1

将你的.search-lens设置为'float：right;'您可能还需要将宽度更改为更小的值。