<li id="first"> <img class="pic" src="img/641cee445140e18a9326c7d33f7fa33d.jpeg" alt="哎呀图片走丢了"> <h4>顾客徐义强</h4> <img class="pic" src="img/641cee445140e18a9326c7d33f7fa33d.jpeg" alt="哎呀图片走丢了"> <h4>顾客徐义强</h4> <img class="pic" src="img/641cee445140e18a9326c7d33f7fa33d.jpeg" alt="哎呀图片走丢了"> <h4>顾客徐义强</h4> </li>这个如何实现把图片放一行，标题放在图片下，并且一一对应

可以通过以下 CSS 代码实现：

li {
  display: flex;
  flex-wrap: wrap;
}

.pic {
  width: 33.33%;
}

h4 {
  width: 33.33%;
  text-align: center;
}

解释一下：

- `display: flex;` 将 `li` 元素设置为弹性布局
- `flex-wrap: wrap;` 将子元素换行显示
- `.pic { width: 33.33%; }` 将图片的宽度设置为父元素宽度的 1/3
- `h4 { width: 33.33%; text-align: center; }` 将标题的宽度设置为父元素宽度的 1/3，并且水平方向居中对齐

这样设置后，`li` 元素内的图片会按照一行三列的方式排列，每个图片下方会对应一个标题，并且水平方向居中对齐。需要注意的是，这里假设每行只有三个图片和标题，如果需要显示更多或更少的内容，需要相应地调整 `width` 属性的值。