为什么我的徽标没有显示在导航栏上，而其他徽标是？

Question

我一直在尝试创建导航栏，但是当我在localhost中加载网站时，我似乎看不到导航栏上的徽标。因此，我去网上搜索了一个例子，看看我的徽标是否是问题所在。在第一个示例中（从网络上可以看到他们的徽标加载情况）

    *{transition:all 0.3s ease-in-out;}
    
    .container{
      clear:both;
      overflow:auto;
    }
    
    nav{float:right;}
    
    .logo img{float:left;}
    
    ul li{
      display: inline-block; padding:10px;
      font-size:20px; font-family:raleway;
    }
    
    ul li:hover{
      color:orange;
      
    }

    <div class="container">
    <div class="logo">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="" width="130"/>
      </div>
    <nav>
      <ul>
      <li>Home</li>
      <li>Services</li>
      <li>Products</li>
      <li>Clients</li>
      </ul>
      </nav>
    </div>
    <hr />

 

然后，我所做的只是将imgur图像的直接链接替换为我的imgur徽标，当我加载该徽标时，它不会显示。怎么会来？

    *{transition:all 0.3s ease-in-out;}
    
    .container{
      clear:both;
      overflow:auto;
    }
    
    nav{float:right;}
    
    .logo img{float:left;}
    
    ul li{
      display: inline-block; padding:10px;
      font-size:20px; font-family:raleway;
    }
    
    ul li:hover{
      color:orange;
      
    }

<div class="container">
    <div class="logo">
      <img src="https://i.imgur.com/jSo9sj9.png" alt="logo" width="130"/>
      </div>
    <nav>
      <ul>
      <li>Home</li>
      <li>Services</li>
      <li>Products</li>
      <li>Clients</li>
      </ul>
      </nav>
    </div>
    <hr />

谢谢您的帮助。

Answer 1

我将其放在body元素中，摆脱了</hr>，它对我有用。

它也可以在jsfiddle.net上使用。