如何为HTML按钮添加边框？display:inline-block实现无效问题求解

架构老林

2026-9-27

调整方案

核心问题梳理

HTML标签嵌套错误，#h5-vid的闭合标签写在了button闭合标签外侧，属于非法嵌套
两处边框设置只配置了颜色，未声明边框宽度和样式，导致边框未生效
按钮内部元素布局未做对齐、边距调整，和预期样式不符

修正后代码

HTML代码

<button id="vid">
  <span>Videos</span>
  <span id="h5-vid">New!</span>
</button>

CSS代码

#vid {
  position: absolute;
  width: 95px;
  height: 60px;
  background-color: #fff;
  /* 给按钮加黑色边框 */
  border: 1px solid #000;
  border-radius: 8px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  /* 内部元素垂直水平居中 */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

#h5-vid {
  border-radius: 25px;
  background: #fff;
  /* 给New标签加黑色边框，调整内边距和字体样式 */
  border: 1px solid #000;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
}