2016-08-25 9 views
0

私はいくつかのヘッダーリンクを持っています。 Example JSFiddleヘッダータグが身体全体に伸びないようにする方法

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

問題がクリック可能なリンク領域がページにまたがるとテキストが終わるところだけで終わらないということです。したがって、ユーザーがリンクの右側にある空白をクリックすると、そのページにリンクされます。

これは興味深い制約ですが、純粋なHTMLソリューションがありますか?可能であれば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/

関連する問題