Html 导航栏行为怪异，后面有h1标记_Html_Css

Html 导航栏行为怪异，后面有h1标记

html css

Html 导航栏行为怪异，后面有h1标记,html,css,Html,Css,我的HTML和CSS有点问题。我有一些代码来制作导航条。 HTML: 然而，当我尝试在div的正下方添加一个h1标记，并使用nav类时，我得到了以下结果：我做错了什么？对我来说，一切看起来都很好。看看我的JSFIDLE。如果希望h1显示在导航栏下，则必须在css中定义.nav-类还可以在.nav上尝试宽度：100%和溢出：隐藏。那就行了是一些关于浮动的有用信息 div.nav只包含浮动元素，因此它失去了形状。您需要修复（请查看我的代码段中的css）： body{margin:0；字体

我的HTML和CSS有点问题。我有一些代码来制作导航条。 HTML:

然而，当我尝试在div的正下方添加一个h1标记，并使用

nav

类时，我得到了以下结果：

我做错了什么？

对我来说，一切看起来都很好。看看我的JSFIDLE。如果希望h1显示在导航栏下，则必须在css中定义

.nav

-类

还可以在

.nav

上尝试

宽度：100%

和

溢出：隐藏。那就行了
是一些关于浮动的有用信息
div.nav
只包含浮动元素，因此它失去了形状。您需要修复（请查看我的代码段中的css）：

body{margin:0；字体系列：'Roboto'，无衬线；}
/*固定包装浮动内容*/
.clearfix:：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
/*修复结束*/
.nav{背景：#eee；}
.导航标题{
浮动：左；
颜色：rgb（114114114）；
文字装饰：无；
填充：1rem 1rem 1rem；
}
导航{
浮动：对；
}
导航ul{
保证金：0；
填充：0；
列表样式：无；
}
李海军{
显示：内联块；
左边距：70像素；
位置：相对位置；
填充：1rem 1rem 1rem；
}
李娜{
填充物：5px 5px 5px；
颜色：rgb（114114114）；
文字装饰：无；
背景色：rgb（230、230、230）；
边界半径：3px；
}
.头衔{
保证金：0；
文本对齐：居中；
颜色：rgb（114114114）；
字号：3em；
填充顶部：2vh；
}




我的标题
溢出：隐藏在大多数情况下都会起作用，但在导航栏上它会阻止使用任何下拉列表。
<!DOCTYPE html>
  <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Daicicle's Combos</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="nav">
            <a href="#" class="nav-title">Website</a>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link">Home</a></li>
                </ul>
            </nav>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body {margin: 0; font-family: 'Roboto', sans-serif;}


.nav-title {
    float: left;
    color: rgb(114, 114, 114);
    text-decoration: none;

    padding: 1rem 1rem 1rem 1rem;
}

nav {
    float: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    position: relative;

    padding: 1rem 1rem 1rem 1rem;
}

nav li a {
    padding: 5px 5px 5px 5px;
    color: rgb(114, 114, 114);
    text-decoration: none;
    background-color: rgb(230, 230, 230);
    border-radius: 3px;
}

.title {
    margin: 0;
    text-align: center;
    color: rgb(114, 114, 114);
    font-size: 3em;
    padding-top: 2vh;
}