<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` 属性的值。

相关问题

<script type="text/javascript" src="../../js/jquery.js"></script> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>如何使用到这个地图

要使用这个地图，一般需要在网页中添加一些 HTML 和 JavaScript 代码。首先，需要在 HTML 文件中创建一个具有一定大小的元素，作为地图的容器，例如：

<div id="mapContainer" style="height: 500px;"></div>

接着，在 JavaScript 中创建一个地图对象，并将其绑定到容器元素上，例如：

var map = new AMap.Map('mapContainer', {
  zoom: 10, // 初始缩放级别
  center: [116.39,39.9], // 初始中心点坐标
  resizeEnable: true // 自适应容器大小
});

这里的 `AMap` 对象是从高德地图 API 中加载的。使用 `Map` 构造函数创建了一个地图对象，并将其绑定到 `mapContainer` 元素上。`zoom` 和 `center` 分别指定了地图的初始缩放级别和中心点坐标。

接下来，可以使用 `bootstrap.AMapPositionPicker.js` 中提供的位置选择器组件来让用户在地图上选择位置，例如：

$('#mapContainer').AMapPositionPicker({
  zoom: 16, // 缩放级别
  useNative: true, // 是否使用原生控件
  markerOptions: {
    raiseOnDrag: true, // 拖动时是否提高标记
    draggable: true // 是否可拖拽
  },
  inputTag: '#positionInput' // 位置信息输入框
});

这里使用了 jQuery 的 `$` 函数来选取 `mapContainer` 元素，并调用 `AMapPositionPicker` 方法来创建位置选择器。`zoom` 参数指定了缩放级别，`useNative` 参数指定了是否使用原生控件，`markerOptions` 参数指定了标记的属性，`inputTag` 参数指定了位置信息输入框的选择器。

<div style="border: 1px solid red;width: 80%;margin: 0 auto;list-style-type: none;"> <ul style="display:flex; " > <li><a href="https://www.baidu.com/?tn=sitehao123_15"><img src="https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-5/baidulogo.png" width="20px"height="20px"/>百度</a></li> <li><a href="https://weibo.com/"><img src="https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/10597f220b047cee3e8ea50e91886d71.ico" width="20px"height="20px"/>新浪</a></li> <li><a href="http://tuijian.hao123.com/"><img src="https://dgss1.bdstatic.com/5bVXsj_p_tVS5dKfpU_Y_D3/data/8d6d2c708fbf92d23e3852340d72f9ff" width="20px"height="20px"/>搜狐</a></li> <li><a href="http://www.qq.com/"><img src="https://dgss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/5838ed1d6a3eef9f91341d9a8af16db8.ico" width="20px"height="20px"/>腾讯</a></li> <li><a href="http://www.163.com/"><img src="https://dgss0.bdstatic.com/5bVSsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/0243171b97e12fd795285d6603b199bb.ico" width="20px"height="20px"/>网易</a></li> <li><a href="http://map.baidu.com/"><img src="https://dgss1.bdstatic.com/5bVXsj_p_tVS5dKfpU_Y_D3/urlicon/bddt2018110949.png" width="20px"height="20px"/>百度地图</a></li> </ul> </div>如何让ul在div中居中

要让 ul 列表在 div 中水平居中，可以使用以下 CSS 样式：

ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

其中 `display: flex;` 将 ul 设置为弹性布局，`justify-content: center;` 将 ul 中的元素水平居中，`align-items: center;` 将 ul 中的元素垂直居中。同时，由于 div 已经设置了 `margin: 0 auto;` 让 div 水平居中，所以 ul 也会相对于 div 水平居中。