HTML如何制作一个带有关闭叉号的标签按钮？排版实例-html教程-PHP中文网

可用纯html+css实现可点击关闭的标签按钮：用×配合.tag-close类设置宽高、居中、悬停/聚焦反馈及过渡动画，外层.tag用flex布局，确保可访问性与点击区域充足。

html如何制作一个带有关闭叉号的标签按钮？排版实例

怎么用纯HTML+CSS实现带关闭叉号的标签按钮

不需要JavaScript也能做出可点击关闭的标签按钮，关键在合理利用×符号、伪元素或内联SVG，再配合CSS控制交互状态。浏览器兼容性没问题，但要注意user-select: none和cursor: pointer必须显式设置，否则视觉像按钮但点不动。

直接用×字符最简单，但字号和垂直对齐容易错位，建议包裹在<span></span>里单独设font-size和line-height
用::after伪元素画叉更灵活，能精确控制大小/颜色/间距，但需确保父容器有position: relative
避免把整个标签设成<button></button>——语义不对，屏幕阅读器会误读为操作控件；推荐用<span role="button" tabindex="0"></span>兼顾可访问性

常见排版错误：叉号位置偏移或点击区域太小

多数人写的叉号靠右贴边后，发现鼠标悬停时只有最右边1–2像素能触发，实际是没给padding-right或margin-left留出安全点击区。正确做法是让叉号容器本身有足够尺寸，而不是只靠文字撑开。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

给关闭区域（比如<span class="tag-close"></span>）设display: inline-flex + align-items: center + justify-content: center
固定宽高，例如width: 18px; height: 18px;，再用font-size: 14px居中显示×
外层标签加padding: 2px 8px 2px 6px，让文字和叉号之间有呼吸感，别挤在一起

CSS里如何让叉号响应hover和focus状态

仅靠:hover不够，键盘用户按Tab键聚焦时也得有视觉反馈，否则不符合WCAG标准。不能只写.tag-close:hover，必须补上.tag-close:focus，且两者样式一致。

统一用background: #f0f0f0; color: #666;作为悬停/聚焦态，取消默认outline，改用box-shadow: 0 0 0 2px rgba(0,0,0,.1)
添加transition: background .15s, color .15s提升手感，但别加太长，否则拖沓
禁用文本选中：user-select: none写在.tag-close上，不然双击可能意外选中叉号

一个可用的最小化HTML+CSS实例

下面这段代码复制粘贴就能跑，没依赖，适配Chrome/Firefox/Safari。注意role="button"和tabindex="0"不能少，否则键盘无法操作。

<style>
.tag {
  display: inline-flex;
  align-items: center;
  background: #e9ecef;
  border-radius: 4px;
  padding: 2px 8px 2px 6px;
  margin: 4px 4px 4px 0;
  font-size: 14px;
}
.tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  font-size: 14px;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.tag-close:hover,
.tag-close:focus {
  background: #dee2e6;
  color: #495057;
  box-shadow: 0 0 0 2px rgba(0,0,0,.1);
}
.tag-close:focus {
  outline: none;
}
</style><span class="tag">前端<span class="tag-close" role="button" tabindex="0">×</span></span>
<span class="tag">CSS<span class="tag-close" role="button" tabindex="0">×</span></span>

叉号图标的视觉权重常被低估——它既要小到不抢主文本风头，又要大到手指能准确点中。真正难的是在紧凑排版里平衡可点击性、可访问性和视觉节奏，不是画个×就完事。