如何将内联块元素中的文本转换为ident？

Question

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>