javascript - 如何使用 html 和 CSS 在一个 div 中添加复选框列表

Question

我需要使用 HTML 和 CSS 在一个 div 中显示一些复选框列表。我在下面解释我的代码。

<div class="col-md-6">
   <div class="input-group bmargindiv1 col-md-12">
        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Multiple Business Name :</span>
                //list of business names with check box         
    </div>
</div>

在 span 之后，我需要显示带有复选框的多个标签，如果在 6 之后还有更多，列表将滚动。请帮助我。

Answer 1

要实现滚动行为，请将复选框插入 .container div，为其指定固定的 height 并设置 overflow-y: scroll;。如果内容变得大于容器本身，这会使容器垂直滚动。请参阅 MDN more information about overflow-y .

.container {
  height: 120px;
  overflow-y: scroll;
}

<div class="col-md-6">
  <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Multiple Business Name :</span>
    <div class="container">
      <div>
        <input type="checkbox" />Checkbox 1
      </div>
      <div>
        <input type="checkbox" />Checkbox 2
      </div>
      <div>
        <input type="checkbox" />Checkbox 3
      </div>
      <div>
        <input type="checkbox" />Checkbox 4
      </div>
      <div>
        <input type="checkbox" />Checkbox 5
      </div>
      <div>
        <input type="checkbox" />Checkbox 6
      </div>
      <div>
        <input type="checkbox" />Checkbox 7
      </div>
      <div>
        <input type="checkbox" />Checkbox 8
      </div>
      <div>
        <input type="checkbox" />Checkbox 9
      </div>
      <div>
        <input type="checkbox" />Checkbox 10
      </div>
    </div>
  </div>
</div>