我正在创建一个看起来像按钮的链接。我遇到的一件事是,如果我有多个单词作为锚,链接/按钮文本将转到下一行。如果定位文本移到下一行,也可以,但是边框不会环绕整个内容。它看起来像是边框断裂(不确定正确的术语)。
请参阅下面的图片以获取参考:(抱歉,图片上载一直失败)
有人知道我怎么做吗
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
<a href="#" class="mainLink">Hard Guarding Solutions</a>
</div>
</div>
