如何使用CSS将列表中文本/锚点标签移至图片右侧？

别着急，这是个很常见的布局需求，我给你几个简单好用的办法，你可以根据自己的场景选：

方法1：用Flexbox布局（最推荐，现代浏览器都支持） #

Flexbox是现在做这种横向对齐最方便的方式，代码简洁还好控制。

你只需要给<li>元素设置display: flex，再根据需要调整垂直对齐方式就行，比如让文字和图片居中对齐：

li {
  display: flex;
  align-items: center; /* 让内容垂直居中，可选，根据需求调整 */
  gap: 10px; /* 图片和文字之间的间距，可选 */
  margin-bottom: 10px; /* 列表项之间的间距，可选 */
}

对应的HTML结构大概是这样：

<ul>
  <li>
    <img src="你的图片地址" alt="图片描述" width="50" height="50">
    <a href="#">要显示在右侧的文字</a>
  </li>
  <li>
    <img src="另一张图片地址" alt="图片描述" width="50" height="50">
    <span>普通文本也可以</span>
  </li>
</ul>

这种方法的好处是不用操心清除浮动，还能轻松调整垂直对齐方式，比如换成align-items: flex-start就能让文字和图片顶部对齐。

方法2：用Float浮动（适合兼容旧浏览器的场景） #

如果需要兼容一些比较老的浏览器，float也是个经典方案。给图片设置float: left，然后记得给<li>元素加上清除浮动的样式，避免布局混乱：

li {
  overflow: hidden; /* 清除浮动，让li包裹住浮动的图片 */
  margin-bottom: 10px;
}
li img {
  float: left;
  margin-right: 10px; /* 图片和文字的间距 */
}

这种方法要注意，如果li里面的内容高度不一致，可能需要额外处理，但对于简单的列表项来说完全够用。

方法3：用Inline-block #

给图片和文字容器都设置display: inline-block，再用vertical-align控制垂直对齐：

li img, li a {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
}
li img {
  margin-right: 10px;
}

不过这种方法要注意，HTML里的换行可能会导致元素之间出现小空格，要是介意的话，可以把图片和文字的标签写在同一行，或者用CSS去掉空格（比如给li设置font-size: 0，再给文字元素恢复font-size）。

你可以试试这几种方法，Flexbox应该是最省心的，大部分现代项目都用这个~

内容的提问来源于stack exchange，提问作者user5711656