在列表項之間具有相同的保證金頂部和右側

我有一些模式內的列表項，我希望每個列表項具有相同的空間或magin之間。所以我使用margin-bottom：1rem和margin-right：1rem，但它不起作用。例如，在較大的設備中，我希望有3列，但它只出現兩列，其間有非常大的餘量。同樣在中型設備中，我需要2列，但在列表項之間右邊和底部具有相同的邊距，但它不起作用，列之間的邊距非常大。在列表項之間具有相同的保證金頂部和右側

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; 
}

來源

2017-09-15 JonD

你categories-list類，它有你想要的利潤，被應用到<ul>元素，而不是每個<li>元素。這隻會對整個列表產生影響。

來源

2017-09-15 12:40:51

在列表項之間具有相同的保證金頂部和右側

回答

相關問題