Question

I'm a newbie.

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>

I tried

    .btn-wrapper a {
      margin-right: -10px;
    }

and

    .btn-wrapper a {
      text-indent: 10px;
    }

with no joy.

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?

Thanks in advance.

Answer 1

您可以在一个范围内包装链接的整个文本部分，并使用margin-right: -10px技术来完成此操作。

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>

修改：

浏览器有bug。

Firefox错误为https://bugzil.la/299943，Chrome错误为https://crbug.com/267056。

Answer 2

您可以简单地将填充内部的位移合并到：
padding: 15px 30px 15px 40px; // no＆lt; span＆gt; s

Answer 3

也许尝试更改填充，所以代替40px，使用30px，即40px - 10px字母间距。

.btn-wrapper a {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 10px;
  padding: 15px 30px 15px 40px;
  border: solid 2px #FFF;
}

Answer 4

<body>

  <div class="btn-wrapper">
    <a href="#">Change</a>
  </div>

  <style>
    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;
      padding-right: 30px;
      border: solid 2px #FFF;
    }
  </style>
</body>

编辑了填充，就是这样：D将<a></a>的右边填充减少到30

Answer 5

像这样使用身体 { background-color：＃1E1E96; } 一个 { font-family：“Helvetica Neue”，Helvetica，Arial，sans-serif; 颜色：#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;
letter-spacing:10px;
}
</style>
<body>

  <div class="btn-wrapper">
    <a href="#"><span>Change Colour</span></a>
  </div>

</body>

如何删除Win64上的<a> tag in CSS?

5 个答案: