IP Girl
  1. IP Girl
  3. HTML + CSS: la largeur ‘a’ ne fonctionne pas
Intereting Posts
Markdown: continuer la liste numérotée Algorithme de rotation des pièces Tesortings Comment rendre la largeur de DialogFragment à Fill_Parent laminage joint data.table en R Comment écouter les changements d’état dans react.js? Modal à défilement Twitter Comment convertir une structure en un tableau d’octets en C #? Tableaux de style NumPy pour C ++? Has_secure_password utilise-t-il une forme quelconque de salage? Que signifient ces mots dans Git: Repository, fork, branch, clone, track? Restaurer l’état de std :: cout après l’avoir manipulé Trier les dépendances maven dans Eclipse Que signifie EnumSet? ServiceStack.Net Redis: stockage d’objects associés par rapport aux identifiants d’objects associés Equivalent Java des chaines textuelles de C # avec @

HTML + CSS: la largeur ‘a’ ne fonctionne pas

J’ai le code suivant:

Partie CSS: 

 .menu { width:200px; } .menu ul { list-style-image:none; list-style-type:none; } .menu li { margin:2px; } .menu A { height:25px; width:170px; background:url(./images/button-51.png); padding:2px 5px ; } .menu A:link { height:25px; width:170px; background:url(./images/button-51.png); padding:2px 5px ; }

Partie HTML:

Tout fonctionne bien, mais lorsque j’ajoute l’élément ‘DOCTYPE’ au début du document HTML:

la largeur de l’élément ‘a’ n’est pas prise en compte.

Question 1: Pourquoi?

Question 2: Comment résoudre ce problème?

Merci beaucoup!

Question 1: Pourquoi?

Parce que ce n’est pas par défaut un élément de bloc .

Question 2: Comment résoudre ce problème?

Faites-en un élément bloc en utilisant display: block; , ou un bloc en ligne par display: inline-block; .

Créer un bloc pour l’ajout de la balise d’ancrage display:block dans le style 

 .menu a { display:block; height:25px; width:170px; background:url(./images/button-51.png); padding:2px 5px ; }

REMARQUE: ne répétez pas tous les éléments dans .menu a:link class .. ajoutez simplement des changements ou de nouveaux styles. NOTE: utilisez toujours les minuscules dans le code HTML et CSS

append un bloc d’affichage dans un: 

 .menu A { display: block; height:25px; width:170px; background:url(./images/button-51.png); padding:2px 5px ; }

Un lien est un élément en ligne par défaut; add display: block; et il utilisera la largeur de l’ensemble.

CSS est tout au sujet du point. L’atsortingbut prend sa place en fonction de cela. Jetez un coup d’œil à la démarche de l’Université Google . Cela aidera beaucoup à comprendre les bases et un peu plus loin.

Cela a fonctionné pour moi, mais comme je voulais que tous mes liens soient sur la même ligne, j’ai utilisé display: inline-block; 

 .menu A { float: left; height:25px; width:170px; background:url(./images/button-51.png); padding:2px 5px ; }