如何使内联块元素中的文本进行识别

Question

简单地说，这里的复选框是图形的，因为我不想出于可访问性原因使用复选框元素（只有链接应该响应交互）。

但是，在 href 旁边有一个跨度并使文本缩进以与文本的开头对齐似乎是一个相当大的挑战。以下是Codepen：

ul { 
  padding: 0px;
  margin: 0px;
  width: 140px;
  background-color: #fffaaa;
  margin-bottom: 10px;
  list-style: none;
}
span.facetapi-check-active {
  background-image: url('https://www.drupal.org/files/project-images/Very-Basic-Checked-checkbox-icon.png');
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  display: inline-block;
}

<ul>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-12">North West & Other Areas</a>
  </li>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-13">Yorkshire and the Humber</a>
  </li>
</ul>

Answer 1

您可以使用

CSS表格

ul { 
  padding: 0px;
  margin: 0px;
  width: 140px;
  background-color: #fffaaa;
  margin-bottom: 10px;
  list-style: none;
}
li {
  display: table;
}
span.facetapi-check-active {
  background-image: url('https://www.drupal.org/files/project-images/Very-Basic-Checked-checkbox-icon.png');
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  display: table-cell;
}
a {
  display: table-cell;
}

<ul>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-12">North West & Other Areas</a>
  </li>
  <li>
    <span class="facetapi-check-active"></span>
    <a href="#" class="facetapi-inactive" id="facetapi-link-13">Yorkshire and the Humber</a>
  </li>
</ul>