web-dev-qa-db-fra.com

HTML + CSS: la largeur 'a' ne fonctionne pas

J'ai le code suivant:

Partie CSS:

<style type="text/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 ;
    }
</style>

Partie HTML:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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!

htmlcssdoctype
39
Budda

Question 1: pourquoi?

Parce que ce n'est pas un élément block par défaut.

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

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

102
BalusC

faire un bloc pour la balise d'ancrage ajouter display:block dans le style

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

NOTE: ne répétez pas tous les éléments de la classe .menu a:link .. ajoutez simplement des modifications ou de nouveaux styles . NOTE: utilisez toujours des minuscules en code html et css

5
Abudayah

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;

3
schwechel

ajouter un bloc d'affichage dans un:

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

Un lien est un élément en ligne par défaut. ajoutez display: block; et il utilisera la largeur définie.

2
Alec

CSS est tout à propos de point. Les attributs prennent leur place en fonction de cela. Jetez un coup d'œil à Google University prenez la question. Cela vous aidera beaucoup à comprendre les bases et un peu au-delà.

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