Html 添加样式时，链接显示在两行上

谢谢大家抽出时间

我试图做一些简单的事情，但结果却很复杂。 我需要一个链接发送电子邮件，但有一些风格的问题。它显示内容已断开（请参见JSFIDLE）。但当我右键点击几次，一切都恢复正常。有什么想法吗

.sendAll{
浮动：对；
保证金权利：10%；
利润底部：3%；
利润率最高：2%；
显示：内联块；
}
#森达尔{
颜色：白色；
填充物：7%25%；
背景色：#0080FF；
显示：内联块；
}
#sendAll:悬停{
背景色：#0164c6；
}

HTML：

只需提供

显示：block

到

#sendAll

标记为元素提供了

font-weight:bold

属性，但元素本身不是块级元素。因此，您必须手动指定相同的

参考代码：

.sendAll{
浮动：对；
保证金权利：10%；
利润底部：3%；
利润率最高：2%；
显示：内联块；
}
#森达尔{
颜色：白色；
填充物：7%25%；
背景色：#0080FF；
显示：块；
}
#sendAll:悬停{
背景色：#0164c6；
}

---

试试这个：

.sendAll {
    float: right;
    margin-right: 10%;
    margin-bottom: 3%;
    margin-top: 2%;
    display: inline-block;
}

#sendAll {
    color: white;
    padding: 7% 25%;
    background-color: #0080FF;
    display: inline-block;
    white-space:nowrap;
}

#sendAll:hover {
    background-color: #0164c6;
}

解释 在

#sendAll

id中添加属性

空白：nowrap

---

如果您希望文本只显示在一行，请将以下内容添加到

#sendAll

类中

white-space: nowrap;

---

在我看来，小提琴和代码片段都不错。这真是太奇怪了！在父项上声明

width

规则并相应地调整同级样式。这可以正常工作，但当您右键单击链接时，它仍将移动！我无法解释这有多么奇怪，您可以使用

px

或

em

中的所有

边距

和

填充

属性，这将解决您的问题。。。