为何我的边框无法包裹Button按钮？

方案1：直接为按钮添加独立边框 #

这是最直接的实现方式，通过CSS给目标按钮设置边框样式：

/* 替换成你实际使用的按钮选择器 */
.dive-btn {
  border: 2px solid #2c3e50; /* 可自定义边框宽度、样式、颜色 */
  padding: 7px 15px; /* 可选：调整内边距优化视觉效果 */
  border-radius: 4px; /* 可选：添加圆角让样式更柔和 */
}

对应HTML结构：

<button class="dive-btn">Dive</button>

方案2：将按钮与关联元素包裹在带边框的容器中 #

如果需要按钮和其他关联元素（比如输入框、导航项）共享一个边框容器，把它们放入同一个父元素并设置容器边框：

<div class="border-container">
  <!-- 这里可以放其他关联元素，比如输入框、图标 -->
  <button>Dive</button>
</div>

对应的CSS：

.border-container {
  border: 1px solid #ddd;
  display: inline-flex; /* 让容器自适应内容宽度 */
  gap: 10px; /* 元素间的间距 */
  padding: 6px;
  border-radius: 4px;
}

针对你提供的示例代码的适配调整 #

如果原示例中按钮使用了.btn类，直接修改该类的CSS规则，移除可能存在的border: none重置，并添加边框样式即可：

.btn {
  /* 保留原有样式不变 */
  border: 1px solid #95a5a6; /* 添加边框 */
  /* 若原有样式有outline属性，可保留或按需调整 */
}

内容的提问来源于stack exchange，提问作者paul.sonnen