html - 标题下降到第二行

Question

当尝试将图像和标题放入列表标签时，标题会掉到第二行。有办法解决这个问题吗？

ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
   width: 50px;
   height: 72px;
   white-space: nowrap;
   padding: 0;
   margin: 0;
}
#searchTitle {
   margin-left: 60px;
}

<ul id="myUL">
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></a></li>
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></a></li>
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></a></li>
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></a></li>		
</ul>

Answer 1

Demo

您必须使用以下内容使其内联。

ul p {
  display:inline;
}

给你这个: