时间戳

首页 > 解决方案 > 让边框环绕整个元素

html - 让边框环绕整个元素

问题描述

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

请参阅下面的图片作为参考：（抱歉图片上传一直失败）

有谁知道我怎么能

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

标签： htmlcss

解决方案

你只需要设置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>

推荐阅读