网格布局和 UL 怪异边距

Question

我有一个带有显示的无序列表：网格，每当我在 chrome devtools 上转到移动视图时，网格更改为列中的 1 个项目而不是 5 个。直到这里一切都很好，但我明白了一些奇怪的左边距，我没有在我的代码中的任何地方定义，我不明白为什么它在这里..当我为 ul 设置 margin:0 时它仍然存在..知道吗？

我的 css & html:

ul {
  list-style: none;
  padding: 0;
  margin: 0 5%;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-gap: 10px;
  max-width: 100%;
}

.title2 {
  margin-right: 10px;
}

@media screen and (max-width: 480px) {
  ul {
    width: 300px;
    margin-right: 10px;
    grid-template-columns: 280px;
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 90%;
  height: 320px;
  text-align: center;
  margin: 5% 0;
}
@media screen and (max-width: 480px) {
  .card {
    height: 265px;
  }
}

<div class="card">
  <div class="img-container">
    <img class="product-thumbnail" src="assets/products/{{product.image}}" alt="{{product.name}}" title="{{product.name}}">
  </div>
  <div class="container">
    <div class="title4 product-name"><strong>{{product.name}}</strong></div>
    <div class="product-price">{{product.price}} $</div>
    <p>
      <button class="btn-purchase" (click)="purchaseItem()">Purchase</button>
    </p>
  </div>
</div>

<div class="title2">Products:</div>
<ul>
  <li *ngFor="let product of products"><app-product [product]="product"></app-product></li>
</ul>

Answer 1

内部媒体查询将 .card 的 left/right margin 设置为 auto 以使其水平居中：

.card {
  margin: 5% auto;
}

我还建议使用基本的 CSS 浏览器重置，如下所示：

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

Answer 2

因为你只在小屏幕上给了 ul margin-right:10px，即 480px 如果定义的话，它会从大屏幕上获取其他边距。

@media screen and (max-width: 480px){
ul {
    width: 300px;
    margin:5% 0;
    grid-template-columns: 280px;
  }

或者如果你还想在小屏幕上给 margin-right:10px 比

@media screen and (max-width: 480px){
ul {
    width: 300px;
    margin:5% 10px 5% 0;
    grid-template-columns: 280px;
  }

网格布局和 UL 怪异边距

Grid layout and UL weird margin

html

css

css-grid