html - 单击 使其表现得像标签

Question

我在 <li> 中有一个元素列表搜索托盘中的标签。我希望用户能够点击 <li> 内的任意位置标签切换复选框的方式与点击相关标签切换复选框的方式相同。

这是整个<li>的高度和宽度:

这是标签的高度和宽度:

这是它们的设置方式:

<ul id="catalogs" class="list-group collapse in">
     <li class="list-group-item" ng-repeat="catalog in catalogs">
          <input type="checkbox" id="{{catalog.id}}" name="{{catalog.id}}" ng-model="searchParams.catalogs[catalog.id]" ng-click="refreshCriteria()" />
         <label for="{{catalog.id}}">{{catalog.title}}</label>
     </li>
 </ul>

这可能吗？

Answer 1

你可以使用显示、位置和文本缩进

label {
  display:block;
  text-indent:1em;
  }
input {
  position:absolute;
  }
li {
  /* demo purpose */ border:solid;
  }

<ul id="catalogs" class="list-group collapse in">
     <li class="list-group-item" ng-repeat="catalog in catalogs">
          <input type="checkbox" id="{{catalog.id}}" name="{{catalog.id}}" ng-model="searchParams.catalogs[catalog.id]" ng-click="refreshCriteria()" />
         <label for="{{catalog.id}}">{{catalog.title}}</label>
     </li>
 </ul>