htmlとCSSを使用して1つのdiv内のチェックボックスのリストを追加する方法

Question

HTMLとCSSを使用して、1つの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;に設定します。これにより、コンテンツがコンテナ自体よりも大きくなると、コンテナを垂直方向にスクロール可能にします。 more information about overflow-yのMDNを参照してください。

.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>

Answer 2

あなたがhttps://jsfiddle.net/8cc36h1t/5/を探して何本ですか？スパンの後にdivを追加し、チェックボックスの周りに折り返すことでそれを達成できます。

は

.scroll { height: 160px; width: 167px; overflow-y: scroll; }

<div class="scroll"></div> 

Answer 3

.bnameList { 
 
    list-style-type: none; 
 
    padding: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<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> 
 
    <ul class="input-group-addon bnameList"> 
 
     <li> 
 
     <label for="b1">business1</label> 
 
     <input type="checkbox" id="b1"></li> 
 
     <li> 
 
     <label for="b2">business2</label> 
 
     <input type="checkbox" id="b2"></li> 
 
     <li> 
 
     <label for="b3">business3</label> 
 
     <input type="checkbox" id="b3"></li> 
 
    </ul> 
 
    </div> 
 
</div>

これは何が必要でしょうか？