Html 如何使导航按钮与标题中的徽标图片处于同一级别？

我不熟悉html和css。我正在尝试创建一个标题。我需要把标志图片放在标题的左边，在右边有导航按钮，但在它旁边的同一层，而不是在它下面

此外，我想知道如何删除导航按钮周围的边距。尽管我的边距为0，但它们周围仍有空格。 我该怎么做？ 以下是我迄今为止编写的代码：

#徽标{
利润率：25像素18%0 50像素；
}
导航ul{
列表样式：无；
利润率：0.10px；
填充：0；
}
李海军{
显示：内联块；
}

拉里罗森伯格官方网站

您要做的第一件事是让图像和

nav

包含浮动链接：

#logo img, #logo nav {
  float: left;
}

然后需要在

nav

元素上设置一个行高度。此高度可能需要更改，具体取决于图像的大小：

#logo nav {
  line-height: 100px;
}

我制作了一把小提琴来演示这一点，可以找到

希望这有帮助

编辑

要将导航条与徽标偏移，只需将

右侧边距

添加到

#徽标img

，或将

左侧边距

添加到

#徽标导航

，因为它们彼此相邻。这里我使用了

#logo nav

，因为它已经有了一个现有的CSS选择器：

#logo nav {
  line-height: 100px;
  margin-left: 50px;
}

另外，请记住，您已经调用了容器div

logo

——这实际上包括图像和导航栏。它只是命名，因此不会影响代码的工作方式，但在您试图操纵

#logo

#时可能会导致一些混乱。）

---

有一个新的小提琴显示了新的偏移量：）

您要做的第一件事是让图像和

nav

都包含浮动的链接：

#logo img, #logo nav {
  float: left;
}

然后需要在

nav

元素上设置一个行高度。此高度可能需要更改，具体取决于图像的大小：

#logo nav {
  line-height: 100px;
}

我制作了一把小提琴来演示这一点，可以找到

希望这有帮助

编辑

要将导航条与徽标偏移，只需将

右侧边距

添加到

#徽标img

，或将

左侧边距

添加到

#徽标导航

，因为它们彼此相邻。这里我使用了

#logo nav

，因为它已经有了一个现有的CSS选择器：

#logo nav {
  line-height: 100px;
  margin-left: 50px;
}

另外，请记住，您已经调用了容器div

logo

——这实际上包括图像和导航栏。它只是命名，因此不会影响代码的工作方式，但在您试图操纵

#logo

#时可能会导致一些混乱。）

---

有一个新的提琴显示了新的偏移：）

你需要

浮动：左

图标img，并留出一些空白将其与链接分开

像这样的

#徽标{
利润率：25像素18%0 50像素；
}
#标志img{
浮动：左；
右边距：10px
}
导航ul{
列表样式：无；
利润率：0.10px；
填充：0；
浮动：对；
}
李海军{
显示：内联块；
}

拉里罗森伯格官方网站

您需要

浮动：将
#logo img
放在左侧，并留出一些空白，将其与链接分开

像这样的


#徽标{
利润率：25像素18%0 50像素；
}
#标志img{
浮动：左；
右边距：10px
}
导航ul{
列表样式：无；
利润率：0.10px；
填充：0；
浮动：对；
}
李海军{
显示：内联块；
}

拉里罗森伯格官方网站










css

html

<header>
<div id="logo">
  <nav>
    <ul>
      <li><img src="lincoln.jpg" alt="Lincoln logo"></li>   
      <li> <a href="index.html"> Home </a> 
      </li>
      <li> <a href="lincoln.html"> Lincoln </a> 
      </li>
      <li> <a href="about.html"> About </a> 
      </li>
      <li> <a href="contact.html"> Contact </a> 
      </li>
    </ul>
  </nav>
</div>
</header>














css

html

<header>
<div id="logo">
  <nav>
    <ul>
      <li><img src="lincoln.jpg" alt="Lincoln logo"></li>   
      <li> <a href="index.html"> Home </a> 
      </li>
      <li> <a href="lincoln.html"> Lincoln </a> 
      </li>
      <li> <a href="about.html"> About </a> 
      </li>
      <li> <a href="contact.html"> Contact </a> 
      </li>
    </ul>
  </nav>
</div>
</header>














你可以简化它。此外，除非必须使用内联样式，否则也不要使用内联样式


#徽标{
保证金：0；
浮动：左；
宽度：30%；
}
导航ul{
列表样式：无；
宽度：70%；
}
李海军{
显示：内联；
}
#标题{
宽度：100%；
显示：内联；
}







您可以简化它。此外，除非必须使用内联样式，否则也不要使用内联样式


#徽标{
保证金：0；
浮动：左；
宽度：30%；
}
导航ul{
列表样式：无；
宽度：70%；
}
李海军{
显示：内联；
}
#标题{
宽度：100%；
显示：内联；
}







Hi可能重复的可能重复！非常感谢你！这在很大程度上起了作用。但我想让菜单栏更向右浮动。现在它在屏幕的中间。我应该向凯瑟琳的NavaNo添加边缘吗？@我已经更新了我的答案来展示Navar浮动到右边。请记住，如果要增加或减少距离，可以更改
左边距的值：）我尝试了左边距，但是