haben den gleichen Rand oben und rechts zwischen Listenelementen

Question

Ich habe einige Listenelemente in einem Modal und ich möchte, dass jedes Listenelement den gleichen Abstand oder magin zwischen haben. Also verwende ich margin-bottom: 1rem und margin-right: 1rem, aber es funktioniert nicht. Zum Beispiel in größeren Geräten möchte ich 3 Spalten haben, aber es erscheint nur zwei Spalten mit einem sehr großen Abstand dazwischen. Auch in mittleren Geräten möchte ich 2 Spalten, aber mit dem gleichen Rand rechts und unten zwischen den Listenelementen, aber es funktioniert nicht, die Spalten haben einen sehr großen Abstand dazwischen.

Html:

<a data-toggle="modal" data-target=".bd-example-modal-lg" href="">Open <i class="fa fa-caret-down" aria-hidden="true"></i></a> 

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 

     <div class="container"> 
      <div class="row"> 
      <ul class="categories-list"> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/tags.svg"/> 
       <a class="">All Options</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/video.svg"/> 
       <a class="">Option1</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/clubbing.svg"/> 
       <a class="">Option2</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/concert.svg"/> 
       <a class="">Option3</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/conference.svg"/> 
       <a class="">Option4</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/exposition.svg"/> 
       <a class="">Option5</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/certificate.svg"/> 
       <a class="">Option6</a> 
       </li> 
       <li class="col-lg-4 col-md-6 col-sm-12"> 
       <img src="{{ URL::to('/') }}/img/categories/literature.svg"/> 
       <a class="">Option7</a> 
       </li> 

      </ul> 
      </div> 
     </div> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.categories-list{ 
    display: flex; 

    flex-wrap:wrap; 
    align-items: center; 
    justify-content: space-between; 
    padding-top: 1rem; 
} 
.categories-list li{ 
    display: flex; 
    align-items: center; 
    margin-bottom: 1rem; 
    padding: 1rem; 
    background-color: yellow; 
    border-radius: 5px; 
    margin-right: 1rem; 
} 

.categories-list img{ 
    width: 20px; 
    height: 20px; 
} 

Answer 1

Ihre categories-list-Klasse, die die Ränder hat Sie wollen, wird auf das <ul> Element angelegt anstelle jedes <li> Element. Dies hat nur Auswirkungen auf die gesamte Liste.