J'essaie d'afficher sur une ligne:
est-il possible de le faire avec un minimum de balise (c.-à-d. Pas d'éléments d'emballage) et sans avoir à régler des hauteurs précises, des hauteur de la ligne, des marges-hauts, etc. Le violon ici montre ce que je ressens sur deux directions incompatibles (en ligne-blocks et vous ne pouvez pas aligner sur la droite contre le flotteur et vous ne pouvez pas aligner verticalement):
http://jsfiddle.net/glauberrocha/busvx/ aucune idée? < / p>
5 Réponses :
J'ai eu le même problème .. Ajouter exemple (avec l'utilisation de twitter bootstrap ): Affichage: Inline au H1, puis pour les boutons: flotteur: droite; Affichage: Inline;
Oui, j'avais pensé à cette solution, mais si vous ajoutez float: droite , la propriété d'affichage devient effectivement bloc (dit Firebug).
Droit. Float ne s'appliquera normalement pas aux éléments en ligne. Peut-être que certains navigateurs se comportent bizarre et le résultat est exactement ce que vous avez essayé d'atteindre ... mais c'est faux ...
J'ai ajouté l'exemple que je viens de copier de la page Web de travail. J'espère que cela vous aidera. Si vous ajoutez une affichage avec style explicitement, cela devrait fonctionner, je suppose ..
Non, votre exemple ne fonctionne pas. Si vous faites H2 de manière significative, vous verrez par vous-même. @Gushiken a raison.
OK, si vous voulez garder la ligne de base, ce n'est pas possible de cette façon. Je n'ai pas été mal conié de la base. Toutefois, si vous avez une taille H1 corrigée, vous pouvez modifier le la hauteur de ligne dans vos liens et ajustez-le à bien paraître ..
Vous avez un problème potentiel avec cette mise en page - que si votre Cependant, ce que vous voulez peut simplement être accompli en utilisant un positionnement absolu: < / p> Si vous avez vraiment peur que l'en-tête et le conteneur d'ancrage puissent s'écouler entre eux en fonction de la teneur générée, vous pouvez utiliser CSS pour arrondi, vous ne pouvez pas pour atteindre cet effet Une combinaison de propriété CSS simple, car avec CSS (et HTML), la teneur s'écoule de gauche à droite et de haut en bas, ou devient absolument ou positionnée fixe qui interrompt le débit. Quoi qu'il en soit, il ne veut pas rester sur la même ligne, et vous alors que le concepteur de mise en page reste laissé avec la résolution des ambiguïtés, une telle mise en page introduirait, telle que ce qu'il faut faire lorsque les deux trains fonctionnant de chaque direction frontale en collision avec l'autre: - ) H1 est trop long et que les boutons sont-ils aussi? Ils vont se rencontrer. À cause de cela, aucun SIMPLE CSS ne le fera pas - CSS ne fait pas de magie comme ça - il devrait impliquer une sorte de solution au problème ci-dessus. max-largeur et Overflow Propriétés pour limiter leurs cases contenant de certaines valeurs sensibles. Le contenu débordant sera caché, mais au moins la disposition ne se cassera pas visuellement. Je suppose que la modification suivante du code ci-dessus (pardon le duplicate) serve le but:
Vous avez raison de signaler le problème possible si le titre ou les boutons deviennent trop longs (bien que je ne sois pas dérangé par cela ici). Votre solution ressemble parfaitement à bien - malgré le balisage supplémentaire!
Il est difficile d'obtenir sans éléments d'emballage ni de valeurs fixes ...
Ajout d'une hauteur de ligne fixe à la fois à la tige et les liens résoudraient votre problème plutôt rapide.
devrait fonctionner, mais seulement lorsque la taille de la tête ne change pas ....
Eh bien, je ne veux pas définir hauteur de ligne pour les liens en raison de la couleur d'arrière-plan. Cela les ferait regarder plus haut que je ne veux vraiment.
Je l'ai fait sur mon site il y a un peu: un H2 à gauche et un bouton à droite. Coup d'écran: code:
Une approche potentielle de cela, en fonction de vos besoins exacts, c'est d'utiliser une disposition de table: jsfiddle: http://jsfiddle.net/busvx/39/ Si vous voulez que les boutons soient strictement alignés à droite, je pense que cette solution nécessite un autre élément d'envelopper eux: jsfiddle: http://jsfiddle.net/busvx/40/
Ce lien peut vous aider. Stackoverflow.com/questions/1702669/...
@venkateshwar: Merci mais je comprends la différence entre
Affichage: bloquer etAffichage: Inline et ce qu'il implique. Votre lien est intéressant d'obtenir une meilleure compréhension, mais j'essaie ici de trouver le meilleur moyen de résoudre ce problème particulier.Votre lien JS Fiddle est cassé.
Je sais, je l'ai supprimé par erreur ...
Voici une nouvelle JS FIDDLE: jsfiddle.net/glauberrocha/busvx
Question similaire: Stackoverflow.com/Questtions/10272605/...