Wie man den float-left und float right auf der gleichen Linie?

Das Problem: 

 **Der linke Teil** (#nav ul li) das float: left 
und **das richtige Teil** (#nav .Suche) das float: right 
**sind nicht in einer Linie**.

es sollte wie folgt sein:
Wie man den float-left und float right auf der gleichen Linie?

aber mir:
Wie man den float-left und float right auf der gleichen Linie?

HTML:

<div id="nav">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
   <div class="search">
     <input type="text" name="search" id="search" value="search">
   </div>

Der CSS:

#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}

#nav .search{
float: right;
}

Meine Lösungen:

Lösung 1: Verwenden Sie bootsrap zu bauen-layout zu tun, anstatt es auf meiner eigenen, ich benutze es auf die Fußzeile, und es ist völlig auf der gleichen Linie! Aber ich weiß noch nicht, wie es funktioniert
Wie man den float-left und float right auf der gleichen Linie?

Lösung 2: ich benutze margin-top: -20px ziehen Sie das Suchfeld oben, aber ich glaube nicht, dass es ist eine gute Praxis.

Kann jemand helfen? Vielen Dank!

InformationsquelleAutor Alex G | 2013-01-23
  1. 7

    Der Grund, warum es nicht funktioniert wie erwartet, ist, dass die <ul> auf der linken Seite erweitert sich nach rechts, so schieben Sie den Inhalt nach unten. Die Lösung könnte sein, die festlegen, dass eine explizite Feste Breite für den linken und rechten Bereichen, die ist, was ich getan habe, wenn ich habe vor dieses Szenario in der Vergangenheit. Aber, wird man sagen, dass ein mix der Schwimmer und sogar die absolute Positionierung ist das, was letztlich die Arbeit.

    • Sie haben Recht, problem gelöst ^_^, vielen Dank!
    • Sie sind herzlich willkommen! Und beachten Sie auch, dass manchmal die Einstellung eine explizite Breite der <ul> wird nicht funktionieren. Also, was Sie tun müssen ist, wickeln Sie die <ul> im <div> und Schwimmer, die <div> element mit einer Breite festlegen. CSS ist kein Spaß. Aber der beste Tipp den ich geben kann, ist die Verschachtelung & das eingliedern von Elementen in Fällen wie diesem wird immer funktionieren und cross-Plattform - & sparen Sie Stunden der schwebenden Eigenart Kopfschmerzen.
    InformationsquelleAutor JakeGould
  2. 10

    Alternative zu den Lösungen, die bereits erwähnt, spiegeln die Reihenfolge der Markierung um, so dass die rechts-floating-Element zuerst kommt.

    CSS:

    #nav ul li {
  float: left;
  list-style: none;
  margin: 0 20px;
}
#nav .search {
  float: right;
}

    HTML:

    <div id="nav">
   <div class="search">
     <input type="text" name="search" id="search" value="search">
   </div>       
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
</div>

    Sie nicht haben, etwas anderes zu tun. Keine anderen CSS-oder markup erforderlich ist.

    InformationsquelleAutor Mr Lister
  3. 4

    Benutzen Sie die absolute Positionierung und Links und rechts Ausrichtung.

    #nav ul, #nav .search {
    margin: 5px;
    position: absolute;
    display: inline-block;
}

    Prüfen Sie hier http://jsfiddle.net/A8SyJ

    InformationsquelleAutor Jon P
  4. 0

    Haben Sie versucht, indem die Suche, während ein anderer Listeneintrag in Ihrem nav und floating, die auf der rechten Seite?

    <li class="search"><input type="text" name="search" id="search" value="search"></li>

    Siehe Beispiel unten:

    http://jsfiddle.net/teWP5/

    InformationsquelleAutor jjsquared
  5. 0

    Können Sie verwenden float:left für ul und float: right mit der search-box

    InformationsquelleAutor nexus_07
Schreibe einen Kommentar