html - 如何对齐此 li 和 span 中的图像和文本

Question

我正在尝试在 li 和 span 中对齐图像和文本。我已经尝试了很多与此类似的问题和答案，但没有成功。不幸的是，使用标签或表格不是一种选择。

谢谢

.checkbox, .radio {
	width: 19px;
	height: 20px;
	padding: 0px;
	background: url(../../Content/Images/TriStateCheckboxes.jpg);
	display: block;
	clear: left;
	float: left;
}
.green {
    background-color: green;
    background: url(../../Content/Images/PermissionChecked.jpg);
    position: absolute;
    top: 11px;
    left: -20px;
}

.red {
    background-color: red;
    position: absolute;
    top: 11px;
    left: -20px;
}

li 
{
	cursor: pointer;
}

<ul class="nav nav-list" id="MM0" style="border: currentColor; border-image: none;">
<li>
    <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMID_0">
        <span class="checkbox MMTree-checkbox styled red" id="sp_MM_0">
            <input name="MM_0" class="MMTree-checkbox styled red" id="MM_0" style="display: none;" type="checkbox" value="false" iid="FkComponentId= ComponentId=2 Granted=-1 PermissionId=0|">
        </span>
        <span>
          LookupTables
        </span>
        <span class="caret"></span>
    </span>
    <ul class="nav nav-list collapse show" id="MMID_0" style="padding-left: 60px;"> 
    <li>
        <span class="accordion-heading" data-toggle="collapse" data-target="#MMID_00">
            <span class="checkbox subtree-checkbox styled red" id="sp_SM_0_0">
               <input name="SM_0_0" class="subtree-checkbox styled red" id="SM_0_0" style="display: none;" type="checkbox" value="false">
            </span>
            <span>
              Countries
            </span>
        </span>
    </li>
</ul>

Answer 1

在您的容器中使用display: flex;，然后使用align-items: center 将它们居中。此外，要删除订单图像，请使用 list-style-type: none;

.checkbox,
.radio {
  width: 19px;
  height: 20px;
  padding: 0px;
  background: url(../../Content/Images/TriStateCheckboxes.jpg);
  display: block;
  clear: left;
  float: left;
}

.red {
  background-color: red;
}

ul {
  list-style-type: none;
}

li {
  cursor: pointer;
}

.accordion-heading {
  display: flex;
  align-items: center;
}

<ul class="nav nav-list" id="MM00">
  <li>
    <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#MMID_0 ">
      <span class="checkbox MMTree-checkbox styled red" id="sp_MM_0 ">
        <input name="MM_0" class="MMTree-checkbox styled red" id="MM_0" style="display: none; " type="checkbox" value="false" >
      </span>
    <span>
        LookupTables
      </span>
    <span class="caret"></span>
    </span>
  </li>
</ul>