Question

我有一些标题链接。

<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是heading entities，它们是块元素的一部分。

让它们内联 - 试试 display:inline;或display:inline-block;。

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

h3{
display:inline;
}

Answer 2

我自己有这个问题。但我并不想内联标题元素。

对我来说，一个简单的解决方案是将标题标记放在链接上：

public class Bar: IDisposable
{
    private Foo foo = null;

    public Bar( string name )
    {
        this.foo = new Foo(name);
    }
    public Bar( Foo foo )
    {
        this.foo = foo;
    }

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }
    protected virtual void Dispose( bool disposing )
    {
        if( disposed )
            return;
        if( disposing )
            foo.Dispose();
        this.disposed = true;
    }
}

而不是：

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

JS小提琴： https://jsfiddle.net/rLtm4154/

Answer 3

这是由h3元素引起的。解决这个问题的唯一方法是CSS。它很简单，只需使用它

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

如何防止标题标签在身体宽度上伸展

3 个答案: