2011-01-16 32 views
34

ho il seguente codice:HTML + CSS: 'a' di larghezza non funziona

parte CSS: parte

<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> 

HTML:

Tutto funziona bene, ma quando aggiungo elemento 'DOCTYPE' all'inizio del documento HTML:

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

la larghezza di 'un' elemento non viene presa in considerazione.

Domanda 1: Perché?

Domanda 2: Come risolvere il problema?

Grazie mille!

risposta

88

Domanda 1: Perché?

Perché di default non è un block element.

Domanda 2: Come risolvere il problema?

Ne fanno un elemento di blocco utilizzando display: block;, o un blocco di linea da display: inline-block;.

+1

wow uomo, basta mi ha salvato un sacco di mal di testa! Non riuscivo a capire perché la larghezza dei miei tag di ancoraggio non potesse essere regolata! – imjp

+0

http://bit.ly/1QQi3Rd Ottima risposta. – Luis

1

Un collegamento è un elemento in linea per impostazione predefinita; aggiungi display: block; e utilizzerà la larghezza impostata.

1

CSS è tutto su punto. Gli attributi prendono il loro posto a seconda di questo. Dai uno sguardo al numero Google University's. Questo aiuterà molto nella comprensione delle basi e un po 'oltre.

2

aggiuntivo blocco di visualizzazione in una: blocco

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

make per aggiungere tag anchor display:block in stile

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

NOTA: dont repet tutti gli elementi in .menu a:link classe .. basta aggiungere modifiche o nuovi stili. NOTA: utilizzare sempre in minuscolo in html e css codice

1

Questo ha funzionato per me, ma dal momento che ho voluto tutti i miei link di essere sulla stessa linea che ho usato display: inline-block;

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