如何在屏幕的左上角放置徽标？答案

【问题标题】：How would I place a logo at the top left hand corner of the screen?如何在屏幕的左上角放置徽标？
【发布时间】：2020-04-17 19:23:24
【问题描述】：

下面是我的代码。我无法在屏幕左上角显示徽标。

我的主要问题是图像没有显示在屏幕上的任何位置，尽管我在图像部分输入了正确的文件名。

如果有人能帮助我，我将不胜感激！提前致谢。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
        }

        li {
          float: right;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 33px;
          height: 67px;
          border-radius: 5px;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="imageO.jpg" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

【问题讨论】：

你试过<img src="../img/imageO.jpg" id="logo" class="logo"/>
..image0.jpg 是否与 html 文件在同一文件夹中？
顺便说一句，我会将img#logo 从li 中取出，并将您的ul 包装在nav 中。而且您不需要float:left 和inline-block
这能回答你的问题吗？ How can find the image path for css

标签： html css

【解决方案1】：

您的徽标真的是 7x5 像素吗？我只是将第一个 li 项移到左侧，如果 imageO.jpg 与您的 Html 位于同一路径中，则可以正常工作。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
        }

        li {
          float: right;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 70px;
          height: 50px;
          border-radius: 5px;
          border: 1px black;
        }
        li:first-child {
          float: left;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="imageO.jpg" alt="not found" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

【讨论】：

我刚刚将徽标的尺寸更改为 67 像素 x 33 像素，这反映在上面的代码中。我也尝试将 imgsrc 更改为“../img/imageO.jpg”，但是，这并没有什么不同。
现在问题出在您的 imgSource 上。在这里您可以找到操作方法：stackoverflow.com/questions/52919100/…

【解决方案2】：

在这里，我以另一种方式做到了这一点：

ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
   display:flex;
   justify-content:flex-end;
        }



        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          position:fixed;
          left:20px;;
        }

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>

【讨论】：

【解决方案3】：

您好，希望这支笔能帮助您确定徽标的位置，还请注意您有一个未打开的结束 div 标签，因为上一个答案我从 Ul 中取出了徽标，因为您正在浮动所有 ul 内容它也需要徽标。

https://codepen.io/MoneWebGuru/pen/WNQwVGX`

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
      div {
          list-style-type: none;
          margin: 0;
          padding: 10px;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
        left:0px;
          width: 100%;
        }

        li {
          float: right;
          list-style-type: none;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */  

        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }    

        .active {
          background-color: #F29078;
        }    

        .logo {        
          border-radius: 5px;
          height: 50px;
          padding-top:10px;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
     <div style="width:100%">
       <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" id="logo" class="logo"/>                    <ul>            
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a>                   </li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

【讨论】：