如何删除< a>的最后一个字母上的字母间距在CSS中标记? [英] How can I remove the letter-spacing on the last letter of an <a> tag in CSS?
问题描述
我是新手.
我正在尝试删除我样式化为按钮并位于页面中心的标签的最后一个字母的字母间距.
I'm trying to remove the letter-spacing on the last letter for an a tag I styled into a button and centred on the page.
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
<body>
<div class="btn-wrapper">
<a href="#">Change Colour</a>
</div>
</body>
我尝试过
.btn-wrapper a {
margin-right: -10px;
}
和
.btn-wrapper a {
text-indent: 10px;
}
没有喜悦.
我不愿意在最后一个字母上加一个空格.
I am loath to put a span on the last letter.
我在堆栈溢出中发现的上述建议.
The above suggestions I found on Stack Overflow.
有人可以解释我的代码发生了什么并帮助找到解决方案吗?
Can someone please explain what's going on with my code and help find a solution?
谢谢.
推荐答案
您可以将链接的整个文本部分包装在一个范围中，并使用margin-right: -10px技术来完成此操作.
You could wrap the entire text part of the link in a span and use the margin-right: -10px technique to get this done.
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
.btn-wrapper a span {
margin-right: -10px;
}
<body>
<div class="btn-wrapper">
<a href="#"><span>Change Colour</span></a>
</div>
</body>
浏览器存在错误.
Firefox错误是 https://bugzil.la/299943 ，而Chrome浏览器的错误是 https://crbug.com/267056 .
Firefox bug is https://bugzil.la/299943 and the one for Chrome is https://crbug.com/267056.
这篇关于如何删除< a>的最后一个字母上的字母间距在CSS中标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
