我在 <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>
这可能吗?
最佳答案
你可以使用显示、位置和文本缩进
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>
关于html - 单击 <li> 使其表现得像标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33309552/