css - 列表项之间的顶部和右侧边距相同

Question

我在模态中有一些列表项，我希望每个列表项之间具有相同的空间或间距。所以我使用 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;
}

Answer 1

你的 categories-list具有您想要的边距的类正在应用于 <ul>元素而不是每个 <li>元素。这只会对整个列表产生影响。