如何在正方形选择框内添加X标记并保持行内布局显示

我原本实现了一组带YES/NO标签的正方形选择框，代码如下：

原始CSS代码 #

.yesNoSquare {
  width: 10px;
  height: 10px;
  border: 1px solid;
  display: inline-block;
}

.yesNoSquare-space {
  padding-right: 20px;
}

原始HTML代码 #

<div class="textCenter">
  <span class="yesNoSquare"></span>
  <span class=" yesNoSquare-space itemsTableHeader"> YES</span>
  <span class="yesNoSquare"></span>
  <span class="itemsTableHeader"> NO</span>
</div>

之后我想在正方形内添加X标记，尝试了以下代码，但用<span>无法正确显示带X的正方形，改用<div>后，带X的正方形无法和同行的YES/NO标签等元素共线对齐，希望实现所有元素在同一行的布局效果。

尝试的CSS代码 #

.yesNoSquare {
  width: 10px;
  height: 10px;
  border: 1px solid;
  display: inline-block;
}

.yesNoSquare-space {
  padding-right: 20px;
}

.yesNoSquare-cross {
  height: 10px;
  width: 10px;
  /*background-color: #FA6900;*/
  position: relative;
  border: 1px solid;
}

.yesNoSquare-cross:after {
  position: absolute;
  top: -45px;
  bottom: 0;
  left: 0;
  right: 2px;
  content: "\2716";
  line-height: 100px;
  text-align: center;
  color: #000000;
}

尝试的HTML代码 #

<div class="textCenter">
  <div class="yesNoSquare-cross"></div>
  <span class=" yesNoSquare-space itemsTableHeader"> YES</span>
  <span class="yesNoSquare"></span>
  <span class="itemsTableHeader"> NO</span>
</div>

解决方案 #

问题根源有两点：

1. <div>默认是块级元素，会独占一行，需设置为行内块元素才能和其他元素共线；
2. 伪元素的定位、行高设置错误，导致X标记位置严重偏移。

修改后的代码如下：

修正后的CSS代码 #

.yesNoSquare {
  width: 10px;
  height: 10px;
  border: 1px solid;
  display: inline-block;
  vertical-align: middle; /* 确保和文字垂直居中对齐 */
}

.yesNoSquare-space {
  padding-right: 20px;
}

.yesNoSquare-cross {
  width: 10px;
  height: 10px;
  border: 1px solid;
  display: inline-block; /* 关键：将块级元素改为行内块 */
  position: relative;
  vertical-align: middle; /* 和文字保持垂直对齐 */
}

.yesNoSquare-cross:after {
  content: "\2716";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让X标记完美居中 */
  font-size: 8px; /* 调整X大小适配正方形 */
  color: #000;
}

修正后的HTML代码 #

<div class="textCenter">
  <div class="yesNoSquare-cross"></div>
  <span class="yesNoSquare-space itemsTableHeader"> YES</span>
  <span class="yesNoSquare"></span>
  <span class="itemsTableHeader"> NO</span>
</div>

额外说明：

• 其实不需要改用<div>，给.yesNoSquare-cross添加display: inline-block后，原来的<span>也能正常显示宽高和X标记；
• vertical-align: middle是保证正方形和文字垂直对齐的关键，避免出现上下错位的情况。

内容的提问来源于stack exchange，提问作者Jesus