减少链接的可点击区域 [英] Reduce clickable area for link
问题描述
我在页面上有一个字，每个单独的字母都是一个链接。我想减小可点击区域的大小，以便字母周围没有空间。现在每封信的左右都没有问题，但每封信的上下都有太多空间。为了说明的目的，我在链接周围加了一个边框（见下面的小提琴）。
有关如何操作的任何想法
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;
颜色：白色;
text-shadow：4px 4px 4px＃000;
background-color：blue;
宽度：100％;
身高：100％;
保证金：0;
}
a {
border：1px纯黑色;
}
div {
position：absolute;
身高：100％;
宽度：100％;
display：table;
}
h1 {
display：table-cell;
vertical-align：middle;
text-align：center;
}
a：visited，a：active {
text-decoration：none;
颜色：白色;
}
a：link {
text-decoration：none;
颜色：白色;
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;
颜色：白色;
FIDDLE： http://jsfiddle.net/8Huu7/10/
除了programminginallston的回答，您还可以添加隐藏的溢出框并加宽，所以：
a {
display：inline-block;
line-height：1em;
overflow：hidden;
width：180px;
}
不幸的是， b
I have one word on a page and each separate letter is a link. I'd like to reduce the size of the clickable area so that there is no space surrounding the letters. Right now it's fine on the left and right of each letter, but there is too much space above and below each letter. I included a border around the links for illustrative purposes (see fiddle below).
Any ideas on how?
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/
In addition to programminginallston answer you can also add overflow hidden and widen the box, so :
a {
display: inline-block;
line-height: 1em;
overflow: hidden;
width: 180px;
}
Although that does clip the H, unfortunately.
这篇关于减少链接的可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
