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

J'ai le code suivant:

CSS partie:

<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 quand je ajouter "DOCTYPE" élément 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 'a' élément n'est pas pris en compte.

Question 1: Pourquoi?

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

Merci beaucoup!

InformationsquelleAutor Budda | 2011-01-16

109

Question 1: Pourquoi?

Parce que c'est par défaut pas un élément de bloc.

Question 2: Comment faire pour corriger cela?

En faire un élément de bloc à l'aide de display: block;, ou une ligne de bloc par display: inline-block;.
- wow homme, vous venez de m'a sauvé une tonne de maux de tête! Je ne pouvais pas comprendre POURQUOI mon ancre étiquettes d'une largeur ne pouvait pas être réglé!
InformationsquelleAutor BalusC
7

faire 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 ;
}
```
REMARQUE: ne repet tous les éléments dans .menu a:link classe.. juste ajouter des changements ou de nouveaux styles.
REMARQUE: toujours utiliser des minuscules dans le code html et css

InformationsquelleAutor Abudayah

ajouter l'affichage du bloc en un :

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

InformationsquelleAutor shankhan

3

Cela a fonctionné pour moi, mais depuis que j'ai voulu de toutes mes liens à être sur la même ligne que j'ai utilisé display: inline-block;

InformationsquelleAutor schwechel
2

Un lien est un élément inline par défaut; ajouter display: block; et il va utiliser l'ensemble de largeur.

InformationsquelleAutor Alec
2

CSS est tout au sujet de point. Attribut de prendre leur place en fonction de cela. Jetez un oeil à Google Université prendre sur la question. Cela aidera beaucoup à comprendre les bases et un peu au-delà.

InformationsquelleAutor ChuckJHardy

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

InformationsquelleAutor Bakul Sinha

Vous devez vous connecter pour publier un commentaire.