javascript - 如何在列表项旁边的垂直线上均匀对齐复选框？

Question

我正在尝试找出一种方法，为每个 ol/li 添加一个复选框，但要垂直对齐。复选框应呈垂直直线，而不是锯齿形。

• 咖啡
  • 雀巢
  • 吉百利
• 茶
• 牛奶

这可能吗？像这样的事情:

Answer 1

我不知道你到底想要实现什么，但我希望这能为你指明正确的方向。

.my-ul{
    padding: 0;
    margin-left: -24px;  
}
.my-ul li{
    list-style: none;
}

<ul>
    <li>Coffee
        <ul class="my-ul">
            <li>
                <input id="nestle" type="checkbox">
                <label for="nestle">Nestle</label>
            </li>
            <li>
                <input id="cadbury" type="checkbox">
                <label for="cadbury">Cadbury</label>
            </li>
        </ul>
    </li>
    <li>Tea</li>
    <li>Milk</li>
</ul>