Question

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

list-style-type没有这样的选择。我尝试将输入标记附加到<li>，例如：
<input type= "checkbox"> 但是这个looks too ugly作为复选框不存在于<li>内html其余部分的不同行上。

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>

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>

Answer 3

您似乎想要一个list-style-type设置为none

的列表

HTML

<ul>
    <li>
        <input type="checkbox"> check 1
    </li>
    <li>
        <input type="checkbox"> check 2
    </li>
    <li>
        <ul>
            <li>
                <input type="checkbox"> check 3
            </li>
            <li>
                <input type="checkbox"> check 4
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox"> check 5
    </li>
      <li>
        <input type="checkbox"> check 6
    </li>
</ul>

CSS

ul {
  list-style-type: none;
}

Codepen示例：https://codepen.io/Washable/pen/MXabVO

在HTML中的无序列表中使用list-style-type复选框

3 个答案: