Html 减少链接的可点击区域_Html_Css_Hyperlink_Resize

Html 减少链接的可点击区域

html css hyperlink

Html 减少链接的可点击区域,html,css,hyperlink,resize,Html,Css,Hyperlink,Resize,我在一页上有一个单词，每个单独的字母都是一个链接。我想缩小可点击区域的大小，这样字母周围就没有空间了。现在，每个字母的左右两侧都可以，但是每个字母的上下都有太多的空间。为了便于说明，我在链接周围加了一个边框（见下面的fiddle）有什么办法吗 HTML: <body> <div> <h1><a href=#>H</a></h1> <h1><a href=#>E</a>

我在一页上有一个单词，每个单独的字母都是一个链接。我想缩小可点击区域的大小，这样字母周围就没有空间了。现在，每个字母的左右两侧都可以，但是每个字母的上下都有太多的空间。为了便于说明，我在链接周围加了一个边框（见下面的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>

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

小提琴：

更新您的

标记css以包括

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

您需要更改

显示

，以便可以像处理块一样处理元素的框，同时仍然允许它与文本内联移动。然后将

行高

更改为仅文本的高度。浏览器通常会添加更大的

行高

，以提高可读性

以下是更新后的JSFIDLE:

除了编程InAllston答案外，您还可以添加溢出隐藏和加宽框，以便：

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

不幸的是，这确实会剪裁H。

之所以会出现这种情况，是因为为变音符号保留了空间。例如，如果你想展示Á或Á，就不会有额外的空间

一种可能的解决方法是为文本定义

页边距顶部

，为容器定义

溢出：隐藏
 也许是这个
    a {
        border: 1px solid black;
        display: block;
        padding-bottom:200px;
        height: 10px;
        width: 150px;
    }

一开始我觉得，亲爱的！它起作用了！但是，您会注意到，如果您将鼠标移到每个字母附近，即使在边界之外，链接仍处于“激活”状态。怎么回事？我想你不可能完全正确。这与字体的间距有关。所以你必须调整线条高度才能找到完美的匹配。我不认为这个答案是一个解决方案。@putvande你是说这是字体的问题，如果我改变字体，可点击的区域可能会减少？因为我试过多种字体，但都是一样的。这很奇怪。检查员说边界框是正确的，但仍然给出了小车悬停动作。我认为没有一个纯粹的css解决方案。你可以用javascript或图像做点什么这比看起来要复杂，也许区域坐标会有所帮助@LostPhilospher我实际上查看了区域坐标，但我认为它们只适用于图像，而不适用于文本…谢谢。隐藏的溢出应该给我我想要的。唯一的问题是有可能把事情删掉……使事情变得更加复杂。我使用的是web字体，因此如果浏览器无法识别该字体，则备份字体可能超出硬编码的界限。