html - 文本换行到第二行，在无序列表中向上推 img

Question

我遇到过这个问题好几次了，我想知道是否有人可以提供任何帮助。

我有以下 html:

<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>

CSS:

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}

有没有办法让文字换行，这样图像就不会被推高？？？

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}

<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>

Answer 1

给 li 添加垂直对齐顶部

ul li{
  list-style-type:none;
  display:inline-block;
  vertical-align: top;
  text-align:center;
  width: 100px;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}

<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>