0

下面的代码是我在导航栏中的内容,图像位于顶部,文本位于底部,无论如何我可以解决这个问题吗?没有图像它工作正常

<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

4

2 回答 2

0

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

演示小提琴

更新代码:

<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>
于 2013-08-07T08:40:08.917 回答
0

img应该放在另一个里面li,因为 animg不是 a 的有效孩子ul

或者也许它应该完全从列表中出来并放在ul不确定你的设计是什么样的之前,但我认为将它完全从列表中取出会更有意义。

于 2013-08-07T08:36:47.087 回答