如何刪除CSS中<a>標記的最後一個字母的字母間距？

我試圖去除一個標籤我定型成一個按鈕，並在頁面上居中的最後一個字母的字母間距。

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

沒有快樂。

我不願意把最後一個字母放在一個跨度上。

我在Stack Overflow上找到了上述建議。

有人可以請解釋我的代碼是怎麼回事，並幫助找到解決方案？

在此先感謝。

來源

2016-06-07 dho

看起來像一個非常奇怪的請求。什麼目的？ –

@Paulie_D的目的是真正地將文字居中。如果使用額外的邊框創建小提琴，您會看到'letter-spacing'在所有字符（包括最後一個字符）的末尾添加一個空格。 – warkentien2

你可以換一個跨度的鏈接的整個文本部分，並使用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>

編輯：

瀏覽器有漏洞。

Firefox的錯誤是https://bugzil.la/299943和一個用於Chrome是https://crbug.com/267056。

來源

2016-06-07 11:36:30

它的工作。謝謝Praveen。 :) – dho

沒問題。只要你能接受，就把答案標記爲接受。 :) –

你可以簡單地納入位移內部填充有：
padding: 15px 30px 15px 40px; // 沒有<跨度>小號需要

來源

2016-06-07 11:43:36 warkentien2

這應該是接受（投票）答案。另外它是一條線，沒有<跨度>添加解決方案。 – warkentien2

也許嘗試改變填充，所以不是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; 
}

來源

2016-06-07 11:43:43 MatS

<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

來源

2016-06-07 11:47:44 hulkinBrain

使用這樣體{ 背景色：＃1E1E96; } a 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>

來源

2016-06-07 12:17:56 SMS

如何刪除CSS中<a>標記的最後一個字母的字母間距？

回答

相關問題