在 HTML 的无序列表中使用列表样式类型的复选框

Question

我正在尝试在网页上制作一个项目符号列表，我需要我的项目符号像用户可以选择的复选框一样运行。然后，我想使用它们根据用户选择的列表元素执行某些功能。此外，每个 <li> 还包含一个 description list 。

list-style-type 没有这样的选项。我试图将输入标签附加到 <li> 这样：

<input type= "checkbox"> 但这 看起来太丑陋 了，因为复选框不在与内部 html 的其余部分不同的行上 <li> 。

原文由 Nityesh Agarwal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的问题不是很清楚。

list-style-type 用于改变子弹的美观，但不能有特定的功能。在下面的示例中，我使用此属性删除项目符号。

 ul {
    list-style-type:none;
}

 <ul>
    <li><input type="checkbox"> whatever</li>
    <li><input type="checkbox"> whatever</li>
 <ul>

编辑

根据您的小提琴，您可以尝试这样做，以便复选框与单词对齐。

 <ul>
    <li>

        <dl>
          <dt> <input type="checkbox"> Coffee </dt>
          <dd> Black, Strong <dd>
      </dl>
    </li>
    <li>

        <dl>
          <dt> <input type="checkbox"> Tea </dt>
          <dd> Exotic </dd>
</ul>

原文由 Martin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您正在寻找这样的东西吗？

 ul {
  list-style-type: none;
}

 <ul>
  <li>
    <dl>
      <dt> <label><input type="checkbox">Coffee</label> </dt>
      <dd> Black, Strong<dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt> <label><input type="checkbox">Tea</label> </dt>
      <dd> Exotic<dd>
    </dl>
  </li>
</ul>

原文由 Rainbow 发布，翻译遵循 CC BY-SA 4.0 许可协议