avvolgere il tag di ancoraggio attorno all’elemento li

Sto creando un menu di navigazione. Voglio usare css in modo che il tag di ancoraggio sia avvolto attorno all’elemento li ma i tag di ancoraggio si trovano all’interno dell’elemento li.

Ecco html

 

ecco il mio meno css

 ul { list-style-type: none; padding: 0; margin: 0; li { padding: 2% 4%; border: 1px solid green; a { text-decoration: none; display: block; } } } 

L’unico elemento legale consentito all’interno di

    è un

  • . Non puoi avere un ancoraggio avvolto attorno a

  • . Questo è vero in HTML5, dove un’ancora può avvolgere altri elementi a livello di blocco.

    Quello che hai in CSS è quasi arrivato, basta aggiungere:

     a { text-decoration: none; display: block; width: 100%; height: 100%; } 

    E la tua ancora riempirà l’intero spazio del

  • .

    Non è ansible renderlo cliccabile, ma ciò che si può fare è espandere l’a-link alla dimensione del li come suggerito qui: https://stackoverflow.com/a/1121754/1068495

    Non usare il padding in li , usa invece l’ line-height per il testo di ancoraggio. Questo lo farà coprire l’intera altezza dell’elemento li .

    Ecco, dai un’occhiata a questo esempio

    Prova questo, dai il padding all’ancora invece di li. Non è ansible tenere fuori li. Modella il tuo ancoraggio invece di li. Lascia agire come un involucro.

     ul { list-style-type: none; padding: 0; margin: 0; li { a { padding: 2% 4%; border: 1px solid green; text-decoration: none; display: block; } } }