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

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

Answer 1

除了编程，你还可以添加溢出隐藏和加宽框，所以：

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

虽然不幸的是，确实会剪辑H.

Answer 2

更新您的a代码css以包含

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

您需要更改display，以便您可以使用元素框，就像它是一个块一样，同时仍允许它与文本一起移动。然后，将line-height更改为仅文本的高度。浏览器通常会添加更大的line-height以便于阅读。

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

Answer 3

这是因为存在变音符号的预留空间。例如，如果你想要显示Á或Ç，就没有额外的空间。

可能的解决方法是为您的文本定义margin-top，为容器定义overflow: hidden。 Here's an example fiddle

Answer 4

也许这个？

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

减少链接的可点击区域

4 个答案: