2016-08-25 4 views
0

일부 머리말 링크가 있습니다. Example JSFiddle몸통 너비에 걸쳐 머리 꼬리표가 늘어나는 것을 어떻게 방지합니까

<a href="#"><h3>Some header link</h3></a> 
<a href="#"><h3>Another link</h3></a> 

문제는 클릭 가능한 링크 영역이 페이지에 걸쳐 뻗어 텍스트가 끝나는 단지 끝나지 않는다는 것입니다. 따라서 사용자가 링크 오른쪽의 공백을 클릭해도 링크는 해당 페이지로 연결됩니다.

이제는 흥미로운 제한 사항이지만 완전히 HTML 솔루션이 있습니까? 가능하다면 CSS를 피하고 싶습니다. 그러나 CSS를 사용하는 유일한 방법이라면 꼭 그렇게하십시오.

답변

3

h1, h2, h3, h4, h5, h6은 블록 요소의 일부인 heading entities입니다.

인라인으로 만들려면 display:inline; 또는 display:inline-block;을 사용해보십시오.

h3 소자에 의해 발생

https://jsfiddle.net/gxwe1gpo/2/

h3{ 
display:inline; 
} 
+1

이 보이는 갈 유일한 길. 고맙습니다. – noblerare

+0

@noblerare 기꺼이 도와 드리겠습니다! – itamar

1

. 그리고이를 해결할 수있는 유일한 방법은 CSS입니다. 그것의 쉬운, 그냥 대신이 사용하십시오

<body> 
    <a href="#"><h3 style="display: inline;">Some link somewhere</h3></a> 
</body> 
+0

CSS를 사용하는 것이 유일한 방법입니다. 고맙습니다. – noblerare

2

나 자신 이이 문제가있어. 그러나 헤더 요소를 인라인하고 싶지 않았습니다.

<body> 
    <h3> 
     <a href="#">Some link somewhere</a> 
    </h3> 
</body> 

대신 :

<body> 
    <a href="#"> 
     <h3>Some link somewhere</h3> 
    </a> 
</body> 

JS 바이올린 :

그래서 나를 위해 쉬운 솔루션 링크 주위에 헤더 태그를 배치했다 CSS는이처럼 https://jsfiddle.net/rLtm4154/

관련 문제