当我在 css 上创建边框并将链接放入该边框时，但它越过边界

Question

我为一个链接创建了类边框，并将链接放入该边框中。然后，当我通过响应式设备链接看到该边框的长度超过该边界时，当我尝试将句子保留在边框中时，它没有问题。我该如何解决？

我的 CSS：

.border { 
    border: 1px solid #cc0000;
    border-radius: 8px;
    width: 100%;
    padding: 5px;
}

Answer 1

您可能使用了一个带有display: block的元素作为.border类的主机：

.border {
  border: 1px solid #cc0000;
  border-radius: 8px;
  width: 100%;
  padding: 5px;
}

<div class="border">
  <a href="https://google.com">Google</a>
</div>

<div>的缺省display值是block，因此是全宽。

您需要的是使用具有display: inline的元素：

.border {
  border: 1px solid #cc0000;
  border-radius: 8px;
  width: 100%;
  padding: 5px;
}

<span class="border">
  <a href="https://google.com">Google</a>
</span>

或者，只需将display: inline添加到.border样式中：

.border {
  border: 1px solid #cc0000;
  border-radius: 8px;
  width: 100%;
  padding: 5px;
  display: inline; /* <---- */
}

<div class="border">
  <a href="https://google.com">Google</a>
</div>