Question

我正在创建一个看起来像按钮的链接。我遇到的一件事是，如果我对锚点有多个词，链接/按钮文本将转到下一行。锚文本转到下一行是可以的，但是边框不会环绕整个内容。看起来好像边框断裂了（不确定正确的术语）。

请参阅以下图片作为参考：（抱歉，图片上传失败）

有人知道我怎么做

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

Answer 1

您只需将display: block设置为.mainLink

.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;
  display: block;
  border: 2px solid #b82222;
}

<div class="container">
  <div class="mainLinkWrapC">
    <a href="#" class="mainLink">Hard Guarding Solutions</a>
  </div>
</div>

获取边框以包裹整个元素

1 个答案: