gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:46:15 26 4
gpt4 key购买 nike

我在一页上有一个词,每个单独的字母都是一个链接。我想减小可点击区域的大小,以便字母周围没有空间。现在每个字母的左右都很好,但是每个字母上下的空间太大了。出于说明目的,我在链接周围添加了边框(请参阅下面的 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/

最佳答案

除了programming inallston answer你还可以添加overflow hidden和加宽box,所以:

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

不幸的是,虽然这确实剪掉了 H。

关于html - 减少链接的可点击区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18197619/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com