文本环绕到第二行，在无序列表中推送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>

Answer 2

只需添加vertical-align

即可

<强> CSS

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
  vertical-align: top;
}

<强> DEMO HERE

Answer 3

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
  vertical-align: top;
}
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>