html - 减少链接的可点击区域

Question

我在一页上有一个单词，每个单独的字母都是一个链接。我想减小可点击区域的大小，以便字母周围没有空间。现在每个字母的左右都可以，但是每个字母的上下空间太大了。出于说明目的，我在链接周围添加了一个边框（参见下面的小提琴）。

关于如何做的任何想法？

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;
    }

小提琴：http : //jsfiddle.net/8Huu7/10/

score 7 · Accepted Answer

除了programminginallston answer之外，您还可以添加隐藏溢出并加宽框，因此：

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

不幸的是，尽管这确实夹住了 H。

score 1 · Accepted Answer

更新您的a标签 css 以包含

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

您需要更改，display以便您可以像处理块一样使用元素的框，同时仍然允许它与文本内联移动。然后，您将更改line-height为仅文本的高度。浏览器通常会增加line-height可读性。

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

score 1 · Accepted Answer

发生这种情况是因为为变音符号保留了空间。例如，如果你想显示 Á 或 Ç，就没有多余的空间。

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

score -1 · Accepted Answer

也许这个？

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

html - 减少链接的可点击区域

4 回答 4

Related

Reference