CSS Horizontal Navigation, Boutons de largeur dynamique, 100% de largeur, Img Backgrounds

Question

J'essaye de faire une barre de navigation horizontale avec x nombre de boutons de largeur inconnus sur la gauche, une image large de 150px pour plafonner sur le côté droit, et l'espace entre les boutons et la casquette coule pour occuper 100% de la largeur de l'écran. Je ne suis pas vraiment bon en CSS et j'ai joué avec des réglages différents en utilisant des divs, des tables, des listes non ordonnées et des combinaisons des trois et je n'arrive pas à le faire fonctionner correctement. Je vais essayer de le dessiner en ascii maintenant:

<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!> 

Ainsi, les boutons, contre le côté gauche de l'écran, se réduire à adapter le contenu du texte, le plafond sera contre la droite de l'écran, et l'entretoise se dilatera/se contractera pour que l'ensemble remplisse 100% de l'écran. Les images sont au format PNG avec une certaine transparence, donc les images ne peuvent pas se chevaucher.

Merci pour l'aide.

Answer 1

Solution la plus simple:

<div id="nav"> 
    <button type="button">One</button> 
    <button type="button">Two</button> 
    <button type="button">Three</button> 
    <div id="cap">Cap</div> 
</div> 

avec:

#nav { overflow: hidden; } 
#nav button { float: left; } 
#cap { float: right; width: 150px; } 

Aucune entretoise est nécessaire parce que la div sera une largeur de 100% (à moins que d'autres CSS change qui). C'est à moins que vous ayez besoin d'un style spécifique pour l'entretoise ou il y a une autre raison de l'avoir. Si c'est juste un problème de style, appliquez le style à la div de nav externe et le contenu apparaîtra au-dessus, en faisant effectivement la même chose.