li 요소 주위에 앵커 태그 감싸기

Question

탐색 메뉴를 생성 중입니다. 앵커 태그가 li 요소를 감싸도록 (듯이) CSS를 사용하고 싶지만, 앵커 태그는 li 요소 내에 있습니다. 여기

여기

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

<ul> 내에서 허용되는 유일한 법적 요소가 <li> 내 덜 CSS입니다 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> 

입니다. <li> 주위에 닻을 감쌀 수 없습니다. HTML5에서는 앵커가 다른 블록 레벨 요소를 둘러 쌀 수 있습니다.

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

그리고 앵커는 <li>의 전체 공간을 채우기한다 당신이 CSS에서 무엇을 가지고

은 추가, 거의있다.

Answer 2

당신은 리튬 클릭을,하지만 당신이 할 수있는 것은 여기 제안 리튬의 크기에 A-링크를 확장 할 수 없습니다 https://stackoverflow.com/a/1121754/1068495

Answer 3

는,이 시도 대신에 리튬의 고정 할 수있는 패딩을 제공 . 외부에 보관하는 것은 불가능합니다. li 대신에 앵커 스타일을 지정하십시오. 리가 래퍼처럼 행동하게하십시오. li에서

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

망가 사용 패딩 대신 앵커 텍스트 line-height를 사용합니다. 이것은 전체 높이가 li 인 요소를 덮을 것입니다. 여기

이 Example

를 보라