CODEWITHSUNDEEP
htmlcss
noblerare
noblerare

Reputation: 11853

How do you prevent header tags from stretching across the body width

I have some header links. Example JSFiddle

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

The problem is that the clickable link area stretches across the page and doesn't just end where the text ends. So if the user clicks the whitespace to the right of a link, it still links them to that page.

Now, this is an interesting constraint but is there a purely HTML solution? I'd like avoid CSS if possible but if it's the only way to do it, then so be it.

Upvotes: 0

Views: 644

Answers (3)

Sicae
Sicae

Reputation: 104

Had this issue myself. But I didn't want to inline the Header Element.

So an easy solution for me was to place the header tags around the link:

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

Instead of:

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

JS Fiddle: https://jsfiddle.net/rLtm4154/

Upvotes: 2

KANAYO AUGUSTIN UG
KANAYO AUGUSTIN UG

Reputation: 2178

That is caused by the h3 element. And the only way to solve that is by CSS. its easy, just use this instead

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

Upvotes: 1

itamar
itamar

Reputation: 3967

h1, h2, h3, h4, h5, h6 are heading entities which are part of the block elements.

To make them inline - try display:inline; or display:inline-block;.

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

h3{
display:inline;
}

Upvotes: 3

Related Questions