html - 将图像放入导航栏 div 会强制文本粘在底部

Question

下面的代码是我的导航栏中的代码，图像位于顶部，文本位于底部，无论如何我可以解决这个问题吗？没有图像也能正常工作

<div class="navbar">    
  <ul>
    <li><a class="select" href="/index.html">Home</a></li>
    <li><a href="/products.html">Products</a></li>
    <li><a href="/service.html">Service</a></li>
    <img src="images/logo.png">
    <li><a href="/sales.html">Sales</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/documents.html">Documents</a></li>
  </ul> 
</div>

它看起来像这样 i.imgur.com/XQqX31X.png 我希望它看起来像这样，如果可能的话 i.imgur.com/Te7lo4q.png

Answer 1

如果您希望图像只是列表中的另一个元素，请将 <img> 括起来<li> 内的标签.如果您希望它以不同的方式显示，请告诉我们，我们将帮助您实现这一目标。

demo fiddle

更新代码:

<div class="navbar">    
  <ul>
    <li><a class="select" href="/index.html">Home</a></li>
    <li><a href="/products.html">Products</a></li>
    <li><a href="/service.html">Service</a></li>
      <li style="list-style:none"><img src="image.png" /></li>
    <li><a href="/sales.html">Sales</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/documents.html">Documents</a></li>
  </ul> 
</div>