减少链接的可点击区域

Question

减少链接的可点击区域

5

我有一个页面上只有一个单词，每个字母都是一个链接。我想要减小可点击区域的大小，使得字母周围没有空白。现在，每个字母的左右都很好，但是上下空白太大了。我在链接周围加了边框以说明问题（请参见下面的fiddle）。

有什么想法吗？

HTML：

<body>
  <div>
    <h1><a href=#>H</a></h1>
    <h1><a href=#>E</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>O</a></h1>
  </div>
</body>

CSS:

    body {
        font-family: 'Sigmar One', cursive;
        font-size: 100px;
        color: white;
        text-shadow: 4px 4px 4px #000;

        background-color:blue;

        width: 100%;
        height: 100%;
        margin: 0;
    }

    a {
        border: 1px solid black;
    }

    div {
        position:absolute; 
        height:100%; 
        width:100%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 0px 2px 3px rgba(255,255,255,.25);
        -webkit-background-clip: text;
           -moz-background-clip: text;
                background-clip: text;
    }

    a:hover {
        text-shadow: 4px 4px 4px #000;
        color: white;
    }

FIDDLE: http://jsfiddle.net/8Huu7/10/

- neuquen

这比看起来更棘手，也许区域坐标会有所帮助？http://www.w3schools.com/tags/att_area_coords.asp - lostphilosopher

@lostphilosopher 我实际上研究过区域坐标，但我认为它们只适用于图像，而不是文本... - neuquen

4个回答

1

更新您的标签CSS，以包含以下内容。

a {
    display: inline-block;
    line-height: 1em;
}

你需要更改 display 属性，以便你可以像块级元素一样处理该元素的框，同时仍然允许其与文本一起移动。然后，你需要将 line-height 更改为仅为文本的高度。浏览器通常为了易读性而添加更大的 line-height。

这是更新后的 jsfiddle：http://jsfiddle.net/QSL6T/

- twinlakes

一开始我很高兴，太好了！它成功了！但是，你会注意到如果你将鼠标靠近每个字母，链接仍然会在边框之外“激活”。这是怎么回事？ - neuquen

1

我认为这个答案不是一个解决方案。 - Kevin Le - Khnle

@Khnle 我认为你是对的。这个解决方案只是改变了边框，而没有真正减少可点击区域。 - neuquen

1

很奇怪。检查器显示边界框正确，但仍然出现错误的悬停动作。我认为没有纯CSS解决方案。你可以使用JavaScript或图像来解决。 - twinlakes

图像将是最简单的方式。 - Zach Saucier

显示剩余3条评论

1

这是因为有重音符号的保留空间。例如，如果您想显示Á或Ç，就没有额外的空间了。

一种可能的解决方法是将margin-top定义为您的文本，并将overflow: hidden定义为您的容器。这里是一个示例fiddle。

- Renato

-1

也许是这个吗？

    a {
        border: 1px solid black;
        display: block;
        padding-bottom:200px;
        height: 10px;
        width: 150px;
    }

- Giwrgos Tsopanoglou

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Bryant · Accepted Answer

除了programminginallston的答案外，您还可以添加overflow hidden并扩大框，如下所示：

a {
  display: inline-block;
  line-height: 1em;
  overflow: hidden;
  width: 180px;
}

虽然这会裁剪掉 H，但并不幸运。