Html 为什么div和Nav会显示为block？

嗨，我正在尝试为我的网站创建一个复杂的标题。现在这个标题由两部分组成

徽标-为此使用div。收割台的15%。显示：内联块

导航-为此使用导航。收割台的85%。显示：内联块

但在浏览器中，我看到导航顶部的徽标保存在堆栈中

如何解决这个问题

下面是我的代码。

---

据我所知，它看起来像你想要的标志和导航并排

在您的代码中，您只编写了display:inline块，使用它您还需要添加垂直对齐：top/bottom/middle

---

除此之外，一个简单的解决方案是根据要求使用左/右浮动

在您的情况下，nav和div位于页眉元素内，而div位于nav的顶部。你可以试试

CSS

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

LOGO
klkdfglkdfjklg

删除div和nav标记之间的换行空格

你可以阅读这篇文章

我还建议使用重置css

---

为什么不将div放在导航中？

标识其他项目

不要将div放在导航中，除非它是导航的一部分（不是通过标记）

**CSS**

body {
    padding: 0;
    margin: 0;
    border: 0;
    background-color: #ccc;
}

header {
    background-color: #444;
    padding: 0;
    margin: 0;
    text-align: center;
}

#logo {
    display: inline-block;
    background-color: yellow;
    padding: 0;
    margin: 0;
    border: 0;  
    width: 15%;
}

nav {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    width: 85%;
    background-color: red;
}

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

<div id='logo'><p>LOGO</p></div><nav>klkdfglkdfjklg</nav>