Wie verhindert man, dass Header-Tags über die Körperbreite strecken

Ich habe einige Header-Links. Example JSFiddle Wie verhindert man, dass Header-Tags über die Körperbreite strecken

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

Das Problem ist, dass der klickbaren Link Bereich auf der Seite erstreckt und endet nicht nur, wo der Text endet. Wenn der Benutzer also auf das Leerzeichen rechts neben einem Link klickt, werden die Links immer noch mit dieser Seite verknüpft.

Nun, das ist eine interessante Einschränkung, aber gibt es eine reine HTML-Lösung? Ich möchte CSS möglichst vermeiden, aber wenn es der einzige Weg ist, es zu tun, dann sei es so.

Quelle

2016-08-25 noblerare

h1, h2, h3, h4, h5, h6 sind heading entities, die Teil der Blockelemente sind.

Um sie inline zu machen - versuchen Sie display:inline; oder display:inline-block;.

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

h3{ 
display:inline; 
}

Quelle

2016-08-25 14:13:21 itamar

Sieht aus wie CSS das ist nur ein Weg zu gehen. Vielen Dank. – noblerare

@noblerare froh, ich könnte helfen! – itamar

, die durch das h3 Element verursacht wird. Und die einzige Möglichkeit, das zu lösen, ist CSS. Es ist einfach, verwenden Sie das stattdessen

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

Quelle

2016-08-25 14:19:58

Sieht aus wie CSS ist der einzige Weg zu gehen. Vielen Dank. – noblerare

Hatte dieses Problem selbst. Aber ich wollte das Header Element nicht inline machen.

eine einfache Lösung für mich So war es, die Header-Tags um den Link zu platzieren:

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

Statt:

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

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

Quelle

2016-12-09 19:08:16 Sicae

Wie verhindert man, dass Header-Tags über die Körperbreite strecken

Antwort

Verwandte Themen