html - 添加样式时链接显示在两行

Question

谢谢大家的宝贵时间。

我想做一些简单的事情，但结果却很复杂。我需要一个链接来发送电子邮件，但样式存在一些问题。它显示了 splinter 的内容(参见 jsfiddle)。但是当我多次右键单击时，一切都恢复正常。有什么想法吗？

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

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

HTML:

<div class="sendAll">
            <a href="#">
                <b id="sendAll">Send Email to All Selected</b>
            </a>
</div>

这是 jsfiddle link

谢谢大家!

Answer 1

只需提供display: block至 #sendAll

<b>标签提供了一个 font-weight: bold元素的属性，但元素本身不是 block 级元素。因此，您必须手动指定相同的内容。

引用代码:

.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: block;
}

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

<div class="sendAll">
  <a href="#">
    <b id="sendAll">Send Email to All Selected</b>
  </a>
</div>