Question

目前，我正在为产品着陆页制作导航栏。而且我无法获得此“约翰斯汽车服务”来放置在汽车图片附近。当我尝试添加h1或p标签时，它将向下推出div。但是，当我不添加任何内容时，它会保留在那里。因此，将其放置在图片中央右侧的最佳方法是徽标（例如stackoverflow徽标）。感谢帮助。如果有什么需要改变的地方，请告诉我，因为我仍在学习，任何建议都将不胜感激。

 body {
        margin:0;
      }
      #header {
        display:flex;
        max-height:50px;
      }
      
      #nav-bar {
        width:40vw;
        justify-content:space-around;
        align-items:center;
      }
      .image {
        width:60vw;
        background-color:gray;
      }
      #header-img{
        width:50px;
      }
      
       ul {
        padding: 0;
        list-style-type:none;
        display:flex;
        justify-content:space-between;
      }

<html>
  <head>
    
  </head>
  <body>
    <header id="header">
      <div class="image">
      <img id="header-img" src="http://clipart.9file.net/770ddeaed8e20e0b205be28ee31cdd9e/cliparts/225/medium/c1493845e027eb29be10ed911d0a015a.png">
        Johns auto service
      </div>
      <nav id="nav-bar">
        <ul>
          <li><a href="#">Location</a></li>
          <li><a href="#">How it works</a></li>
          <li><a href="#">Pricing</a></li>
        </ul>
      </nav>
      
    </header>
  </body>
</html>

Answer 1

到目前为止，我看到您没有在文档的开头声明您的.css文件。在文档的开头添加。 styles.css可以是您命名为的任何内容。 css文件。

Answer 2

您应该将display：inline-block添加到p标签或h1或其他任何内容。所以它留在父母里面。

#header p {
    display: inline-block;
}

我举了一个例子，如果它回答了您的问题（虽然请求杂乱，但不确定）

https://codepen.io/anon/pen/XBBGrJ

礼物

Answer 3

 You can check this fiddle

https://jsfiddle.net/Minal4/fvuojp8x/3/

如有任何疑问，请随时提问：）

将文字移到徽标附近的最佳方法是什么？

3 个答案: