li標記中的隱藏div

Question

我有一個菜單圖標。當我點擊搜索圖標時，出現一個隱藏的輸入表單用於搜索。問題是，當我點擊圖標時，表單在右側快速滑動，但圖標圖像下降並且不固定。

這是我在工題材的function.php創建的函數：

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

這是JavaScript函數：

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

這是自定義的CSS代碼：

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

那麼如何避免圖標往下滑，當我點擊它？

Answer 1

將您的.search-lens設置爲'float：right;'您可能還需要將寬度更改爲較小的值。