2017-10-11 1 views
-2

Ich habe erweiterbares Suchfeld erstellt und es auf "float: left" gesetzt.Suchfeld schwimmt nicht richtig

Aber Moving "float: rechts" für ein Suchfeld. - https://www.screencast.com/t/mZ5LpKkjH1O

Sie können sehen, diese in Aktion bei http://www.test3.guru99.com/

+0

Bitte aktualisieren Sie Ihre Frage ein einzubeziehen [Minimal, Complete, und prüfbare Beispiel] (https://stackoverflow.com/help/mcve) - externe Links entmutigt werden, da sie im Laufe der Zeit ändern können und nicht hilfreich für andere Benutzer. (Auch viele Leute sind verständlicherweise vorsichtig beim Klicken auf zufällige unbekannte Links). Siehe: [Erstellen eines ausführbaren Code-Snippets] (https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – FluffyKitten

Antwort

0

Anstatt direkt in das Suchfeld Element schwimmen, schweben rechts Behälter, in diesem Fall das <li> Element.

0

Es gibt 2 weg entsprechend ihren anforderungen.

  1. Hintere Position herstellen: rechte Mitte. Es hilft, Animationen von rechts nach links zu sehen.
  2. Wenn Sie wirklich Animation von rechts nach links wollen, so müssen Sie Suchfeld als Overlay machen (in diesem Fall Suchfeld wird mit Menü überlappen) nach Position: absolut und es wird das erste Mal in der gleichen Position und nach dem Klicken bleiben Es wird nach links erweitert und überlappt sich mit dem Menü.

und wie auf Ihrer Website, müssen Sie nur Breite wie 50px des Elternteils li Tag der Such-Box zu beheben.

+0

danke für deine Antwort, kann Bitte stellen Sie mir einen Screenshot oder eine Kopie zur Verfügung. –

+1

@TusharKorat es an * Sie *, um * uns * mit einem Beispiel für das Problem zu versehen, das Sie haben. Sie müssen uns den relevanten Code in einem [minimalen, vollständigen und überprüfbaren Beispiel] (https://stackoverflow.com/help/mcve) geben, damit wir Ihnen genau zeigen können, wie Sie es beheben können. – FluffyKitten

0

Hinzufügen float: left! Wichtig; für Klasse = "maximenuck maximenuckmodule item1509 last level1". Siehe Bild unten.

image