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并为其指定宽度，从padding-right

中移除li

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

列表中的全宽输入和标签

1 个答案: