zawij znacznik kotwicy wokół li elementu

Question

Tworzę menu nawigacyjne. Chcę użyć css, aby znacznik zakotwiczenia został zawinięty wokół elementu li, ale znaczniki zakotwiczenia znajdują się wewnątrz elementu li.

Oto html

<ul> 
    <li><a href="">Uutiset</a></li> 
    <li><a href="">Foorumi</a></li> 
    <li><a href="">Kauppa</a></li> 
    <li><a href="">Messut</a></li> 
    <li><a href="">Asiakaspalvelu</a></li> 
    <li><a href="">Nakoislehti</a></li> 
    <li><a href="">Nae meidat</a></li> 
</ul> 

tutaj jest mój mniej css

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

Answer 1

Jedynym elementem prawnym dozwolone wewnątrz <ul> jest <li>. Nie możesz mieć kotwicy owiniętej wokół <li>. Dotyczy to HTML5, w którym kotwica może owijać się wokół innych elementów na poziomie bloku.

Co masz w CSS jest prawie tam, wystarczy dodać:

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

A twoja kotwica wypełnia całą przestrzeń <li>.

Answer 2

Nie można zrobić klikalny Li, ale co można zrobić, to rozszerzenie A-Link do wielkości li jak sugeruje tutaj: https://stackoverflow.com/a/1121754/1068495

Answer 3

Spróbuj tego, dać dopełnienie do zakotwiczenia zamiast li . Nie można trzymać się na zewnątrz li. Stwórz kotwicę zamiast li. Niech li działają jak opakowanie.

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

Answer 4

nie używaj wyściółka w li użyć line-height dla anchor text zamiast. To sprawi, że pokryje całą wysokość elementu li.

Oto, spójrz na to Example