单击<li>以表现得像标签

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

您可以使用显示，位置和文字缩进

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;