J'essaie de faire une touche de la largeur d'une colonne.
E.g. Ici: http://davidnhutch.com . Remarquez comment les boutons de gris clair ne sont-ils que aussi grands que le texte qu'ils contiennent? J'aimerais que chaque bouton s'étend sur la largeur de cette colonne, mais je ne peux pas pour la vie de moi comprendre comment le faire. J'ai fait un peu de choses à regarder, mais je suis toujours un peu nouveau à cela.
Des idées?
3 Réponses :
Vous devrez les faire bloquer des éléments pour pouvoir définir une largeur:
Ajout de largeur: 100% à .button semble fonctionner pour les boutons centraux et droit au bas de la page.
C'est parce qu'ils ont une classe supplémentaire, right , qui les flotte et les convertit dans des éléments de niveau de bloc.
@Jeen - si flottant un élément le convertit automatiquement en un élément de niveau de blocage? Est-ce vrai dans tous les navigateurs? Intéressant...
Comment voulez-vous flotter un élément en ligne? Où le mettriez-vous? Et quelle est sa taille? Si vous pensez un peu de ces questions, tout est logique.
Généralement, ces boutons sont appelés "élément en ligne". Le rendu de navigateur a des algorithmes très complexes de la mise en page de ces éléments. C'est comme composition mais avec des objets sur votre écran à la place.
CSS et HTML influencent comment le Algorithme fonctionne: déterminer la largeur et la hauteur, la couleur, etc. d'objets. Aussi leur position et la manière dont les flux de texte, ou combien de longs boutons sont.
Il y a une limitation, cependant. Vous ne pouvez rien utiliser comme une largeur variable pour les éléments en ligne.
Ajout de Cependant, le bouton n'est plus après "texte", mais est mis en dessous. C'est parce que c'est maintenant un "élément de bloc". C'est comme un paragraphe complet, au lieu d'éléments dans une ligne de texte. Si c'est ce que vous voulez; Bien et résolu résolu. Si ce n'est pas ce que vous voulez, et que vous voulez plutôt: ceci est pas possible . CCS4 serait cool s'il ajoute largeur: 100%; Affichage: Bloc Comme les autres suggéraient des boutons parfaits: mais seulement lorsqu'ils commencent à gauche ou à droite de la boîte contenant. Si c'est après une phrase, alors il (devrait) afficher comme suit: inline-largeur: 100% ou en ligne-hauteur et résolvez beaucoup de problèmes. Cependant, CSS4 n'existe pas encore.
Vous pouvez toujours utiliser une table ;-)
Pas du tout. Le texte a généralement une taille différente sur différents paramètres de différents systèmes d'exploitation: la dernière ligne doit être scindée et placer dans une table. Cependant, cela ne peut pas être fait de manière déterministe pour être compatible avec la plate-forme croisée et le navigateur croisé: quelque chose que le Web doit ces jours-ci. D'où le "pas possible".
Eh bien, je plaisantais, mais en utilisant un Nowrap sur la première colonne, un 99% largeur sur le second et un 100% largeur sur Le bouton pourrait simplement fonctionner. Mais je ne vais pas vous soucier de l'essayer ...