Le problème strong>: mais le mien: strong>
p> 
p> #nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}
#nav .search{
float: right;
}
5 Réponses :
La raison pour laquelle il ne fonctionne pas comme prévu est que le à gauche se développe à droite, poussant ainsi le contenu vers le bas. La solution peut être de définir une largeur fixe explicite pour les zones gauche et droite qui est ce que j'ai fait lorsque j'ai rencontré ce scénario dans le passé. Mais dira qu'un mélange de flotteurs et même un positionnement absolu est ce qui fonctionnera finalement.
De rien! Et Notez également que définir parfois une largeur explicite sur le ne fonctionnera pas. Donc, ce que vous avez à faire est d'envelopper le
dans un
et de flotter que
élément avec une largeur de jeu. CSS n'est pas amusant. Mais le meilleur conseil que je puisse donner est la nidification et l'emballage des éléments dans des cas comme celui-ci fonctionnera toujours sur la plate-forme croisée et vous permettra de vous faire économiser des heures de maux de tête à enfouissement flottant.
Avez-vous essayé d'ajouter la recherche sous forme d'un autre élément de la liste de votre valeur liquidative et de flotter à droite?
Voir l'exemple ci-dessous:
Vous devez utiliser un positionnement absolu et utiliser l'alignement gauche et droit.
#nav ul, #nav .search {
margin: 5px;
position: absolute;
display: inline-block;
}
Vous pouvez utiliser flotteur: laissé pour l'ul et le flotteur: droite avec la zone de recherche
Une alternative aux solutions déjà mentionnées consiste à retourner l'ordre du balisage autour, de sorte que l'élément flottant à droite vienne en premier.
p>
<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>
Il semble bien ici ici jsfiddle.net/arunpjohny/pzhpm/1