当我在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>