Question

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

徽标 - 为此使用div。头部的15％。 display：inline-block
导航 - 为此使用导航。 85％的标题。 display：inline-block

但是在浏览器中，我看到导航顶部的标识保留在堆栈中。

如何摆脱这个问题。

以下是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <!-- main css-->
        <link rel="stylesheet" type="text/css" href="./css/main.css"/>
    </head>
    <body>
        <header>
            <div id='logo'>
                <p>LOGO</p>
            </div>
            <nav>
                klkdfglkdfjklg
            </nav>
        </header>
        <footer></footer>
    </body>
</html>

**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;
}

Answer 1

在你的情况下，nav和div位于你的标题元素内，div位于导航的顶部。你可以尝试

CSS

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

Answer 2

根据我的理解，看起来你想要徽标和导航并排。

在你的代码中，你只写了display：inline-block，你还需要添加vertical-align：top / bottom / middle。

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

Answer 3

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

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

你可以阅读这篇文章

How do I remove extra margin space generated by inline blocks?

我建议也使用reset css http://meyerweb.com/eric/tools/css/reset/

为什么div和Nav被显示为块？

3 个答案: