List列表数据渲染后无法正确显示样式怎么办？

A. 春景提问于 2026-03-31 05:50:16 阅读 4

组件

我在用Vue写一个商品列表，数据能正常从接口拿到，也用v-for渲染出来了，但每个列表项的间距和对齐总是乱的，明明CSS写了margin和flex布局。

控制台也没报错，结构看起来没问题，但就是样式没生效。我试过加scoped，也试过把样式提到全局，还是不行。这是我的模板和样式：

<template>
  <div class="product-list">
    <div v-for="item in products" :key="item.id" class="product-item">
      <img :src="item.image" alt="" />
      <h3>{{ item.name }}</h3>
      <p>¥{{ item.price }}</p>
    </div>
  </div>
</template>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  width: calc(50% - 12px);
  margin: 6px;
  border: 1px solid #eee;
}
</style>

我来解答赞 5 收藏

反馈

1 条解答

UP主～雪琪 Lv1

看起来是布局计算的问题。首先确认 calc(50% - 12px) 这个宽度计算是否正确，考虑到边框和padding的影响。

建议你加上 box-sizing: border-box; 到 .product-item 样式里，让元素的宽高包含内边距和边框，这样能避免一些意想不到的布局问题。

.product-item {

  box-sizing: border-box;

  width: calc(50% - 12px);

  margin: 6px;

  border: 1px solid #eee;

}

另外，记得检查父元素是否有其他影响布局的样式，比如padding之类的。要做校验的时候，可以在浏览器开发者工具里直接修改这些值看看效果。

说到安全方面，虽然这是前端样式问题，但也要注意图片加载的安全性，确保图片源可信。对图片路径做必要的过滤和验证，防止XSS攻击。

再一个就是flex布局兼容性，考虑加个 justify-content: space-between; 到 .product-list 上，让布局更稳定些。有时候不同浏览器对flex的表现不太一致，这点要特别留意。

2026-03-31 06:02