如何防止标题标签超出正文宽度

Question

我有一些标题链接。 JSFiddle 示例

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

问题在于可点击的链接区域延伸到整个页面，而不仅仅结束于文本结束的地方。因此，如果用户单击链接右侧的空白，它仍然会将他们链接到该页面。

这是一个有趣的限制，但是有没有一个纯粹的 HTML 解决方案？如果可能的话，我想避免使用 CSS，但如果这是唯一的方法，那就这样吧。

Answer 1

h1、h2、h3、h4、h5、h6 是标题实体，它们是块元素的一部分。

要使它们内联 - 尝试

display:inline;

或

display:inline-block;

。

h3{
display:inline;
}

Answer 2

我自己也遇到过这个问题。但我不想内联标题元素。

所以对我来说一个简单的解决方案是将标题标签放在链接周围：

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

代替：

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

Answer 3

这是由

h3

元素引起的。解决这个问题的唯一方法就是

CSS

。很简单，用这个代替即可

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