Question

我有一个看起来非常好的引导列表。但是，我希望能够使用底部的删除按钮从列表中选择和删除元素。我一直试图在列表元素中包含复选框，但没有取得多大成功，它们要么根本不显示，要么位于看起来很可怕的列表项下面。这是我的代码 -

<ul id = "list" class="list-group">
  <a href="#" class="list-group-item active">
    Group
  </a>
  <a data-toggle="modal" data-target="#myModal" class="list-group-item">Maths</a> <input type = "checkbox">
  <a data-toggle="modal" data-target="#myModal" class="list-group-item">History</a> <input type = "checkbox">
  <a data-toggle="modal" data-target="#myModal" class="list-group-item">Chemistry</a> <input type = "checkbox">

</ul>

我已经尝试将复选框的浮动设置为左侧，但这没有任何效果。理想情况下，我宁愿在右侧有复选框，但这似乎打破了链接。任何人都可以告诉我如何做到这一点，或建议一个更好的方法来选择和删除列表项？如果这是一个显而易见的问题，新手可以原谅我缺乏知识。

Answer 1

嗯，我最后把它放在桌子上。可能是一个非常明显的问题，但无论如何这是我的解决方案 -

<table>
  <tr>
    <td colspan="2">
<ul id = "list" class="list-group">
  <a href="#" class="list-group-item active">
    Group </a>
  </td>
</tr>
  <tr>
    <td><input type = "checkbox"></td>
  <td><a href="#" onclick="myFunction()" class="list-group-item">Maths</a></td>
</tr>
<tr>
  <td><input type = "checkbox"></td>
  <td><a href="#" onclick="myFunction()" class="list-group-item">History</a></td>
</tr>
<tr>
  <td><input type = "checkbox"></td>
  <td><a href="#" onclick="myFunction()" class="list-group-item">Chemistry</a></td>
  </tr>
</ul>
</table>

从引导列表中选择和删除元素

1 个答案: