Comment faire le flotteur gauche et flotter à droite sur la même ligne?

Le Problème: 

 **La partie gauche** (#nav ul li) qui float: left 
et **la partie droite** (#nav .de recherche) qui float: right 
**ne sont pas en ligne**.

il devrait ressembler à ceci:
Comment faire le flotteur gauche et flotter à droite sur la même ligne?

mais le mien:
Comment faire le flotteur gauche et flotter à droite sur la même ligne?

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

Le CSS:

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

#nav .search{
float: right;
}

Mes Solutions:

Solution 1: Utilisation bootsrap pour construire la mise en page au lieu de le faire sur mon propre, je l'utilise sur le pied de page, et il est tout à fait sur la même ligne! Pourtant, je ne sais toujours pas comment il fonctionne
Comment faire le flotteur gauche et flotter à droite sur la même ligne?

Solution 2: - je utiliser margin-top: -20px à tirer la boîte de recherche en haut, mais je ne pense pas que c'est une bonne pratique.

Quelqu'un peut aider? Merci beaucoup!

Il semble bien ici jsfiddle.net/arunpjohny/PZhpm/1

OriginalL'auteur Alex G | 2013-01-23

  1. 6

    La raison pour laquelle ça ne fonctionne pas comme prévu, c'est que le <ul> sur la gauche est en pleine expansion à qui de droit, ce qui pousse le contenu vers le bas. La solution pourrait être de définir explicitement la largeur fixe pour la gauche et droite, qui est ce que j'ai fait lorsque j'ai été confronté à ce scénario dans le passé. Mais dire qu'un mélange de chars et même le positionnement absolu est ce qui finira le travail.

    vous avez raison, le problème est résolu ^_^, merci beaucoup!
    Vous êtes les bienvenus! Et notez aussi que parfois, réglage explicite de la largeur de la <ul> ne fonctionnera pas. Donc, ce que vous avez à faire est d'envelopper le <ul> dans un <div> et un flotteur qui <div> élément avec une largeur définie. CSS n'est pas amusant. Mais le meilleur conseil que je puisse donner est de nidification & l'enchaînement des éléments dans des cas comme cela sera toujours le travail de la croix-plate-forme & vous épargner des heures de flottement caprice des maux de tête.

    OriginalL'auteur JakeGould

  2. 2

    Vous devez utiliser le positionnement absolu et l'utilisation à gauche et à droite de l'alignement.

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

    Vérifier ici http://jsfiddle.net/A8SyJ

    OriginalL'auteur Jonathan Perada

  3. 0

    Avez-vous essayé d'ajouter la recherche comme un autre élément de la liste au sein de votre nav et flottant à droite?

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

    Voir l'exemple ci-dessous:

    http://jsfiddle.net/teWP5/

    OriginalL'auteur jjsquared

  4. 0

    Vous pouvez utiliser float:left pour l'ul et float: right avec la boîte de recherche

    OriginalL'auteur nexus_07