Verstecktes div in einem li tag

Question

Ich habe ein Menüsymbol. Wenn ich auf das Suchsymbol klicke, erscheint ein verstecktes Eingabeformular für die Suche. Das Problem ist, dass, wenn ich auf das Symbol klicke, das Formular schnell nach rechts rutscht, aber das Symbolbild nach unten geht und nicht fixiert ist.

Dies ist die Funktion, die ich in der Arbeiter Thema des function.php erstellt haben:

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

Dies ist die JavaScript-Funktion:

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

Und dies ist der benutzerdefinierte CSS-Code:

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

So wie das Symbol zu vermeiden Abrutschen, wenn ich darauf klicke?

Answer 1

Setzen Sie Ihr .search-Objektiv auf 'float: right;' Möglicherweise müssen Sie auch die Breite auf einen kleineren Wert ändern.