html - 列表内的全 Angular 输入和标签

Question

我有一个下拉列表，其中包含一系列复选框和标签。看起来有点像:

<div class="triggerHome">
    <div class="trigger">
        <ul>
            <li>
                <input type="checkbox"/>
                <label>Label</label>
            </li>
            <li>
                <input type="checkbox"/>
                <label>Label</label>
            </li>
            <li>
                <input type="checkbox"/>
                <label>Label</label>
            </li>
        </ul>
    </div>
</div>

不幸的是，标签没有跨越容器的整个宽度。所以有很多用户无法点击的空白区域。

我可以使用 javascript/jquery 解决方案，但我更愿意只使用 CSS 来解决这个问题:

$('li').click(function(e) {
   $(this).children
   ('input[type=checkbox]').trigger('click');
});

Here's a JSFiddle

Answer 1

如果您希望标签与复选框在同一行，请使用 display:inline-block; 并按照 Hristo 所说定义宽度。包装 input 并为其指定宽度，从 li

中删除 padding-right

Updated jsFiddle

    <li for="manage-locations-minnesota">
        <div class="tenPercent">
            <input id="manage-locations-minnesota" type="checkbox" name="manage-locations-minnesota" value="false">
        </div>
        <label for="manage-locations-minnesota">Minnesota</label>
    </li>

添加/更改 CSS:

.right-label label {
    position: relative;
    display:inline-block;
    width:90%;
    padding: 15px 0;
    left: 5px; 
    cursor: pointer;
}
.tenPercent {
    float:left;
    width:10%;
}

.custom-dropdown li {
  display: block;
  border-top: 1px solid #7b95a1;
  padding: 9px 0 9px 18px; }