블록 구성 요소를 <a>

Question

으로 읽었을 때 웹에서 읽었을 때 <a> 요소 안에 블록 요소를 래핑하는 것은 유효한 html5 연습입니다. 나는 문제가있다.

내 HTML

<a href="http://google.com" target="_blank"> 
<div> </div> 
</a> 

내 CSS를

div { 
    background:#f00; 
    height:100px; 
    margin-left:10px; 
    width:300px; 
} 

a {background:blue;} 

링크가 실제로 작동,하지만 난 더 블루 background 크롬 내 a 폭에는 높이가 없다고 말한다 볼

a의 CSS를 display:inline-block으로 변경하면 트릭이 실행되지만 내 웹 사이트에서는 그렇지 않습니다.

당신이 어떤 제안이나 해결책을해야합니까? a 엘리먼트가 그 아이를 "따라 다니지"않는 이유는 무엇입니까? 감사합니다.

a { 
    display: block; 
    background:blue 
} 

EXAMPLE 1

하거나 사용자 :

http://jsfiddle.net/72cYy/82/

Answer 1

그것은 당신이 블록 요소처럼 행동하려는 경우 display:block-a을 설정할 수 있습니다, 당신이 찾고있는 무엇에 따라 달라집니다 그것은 마치 자연 그대로의 것처럼 동작하도록 display: inline-block으로 설정할 수 있습니다.

a { 
    display: inline-block; 
    background:blue 
} 

EXAMPLE 2

이 중 하나가 귀하의 사이트에 작동하지 않을 이유가 없다. 아마도 당신은 CSS 또는 자바 스크립트 그것을 덮어 씁니까? 이 두 가지 방법 모두 접힌 높이/너비 문제를 해결합니다.

a#wrapper{ 
    display: inline-block; 
} 

또는

a.wrapper{ 
    display: inline-block; 
} 

이 축소 된 요소에 대한 자세한 내용은, 당신이 this SO answer