Question

我的HTML和CSS有点麻烦。香港专业教育学院有一些代码来制作导航栏。 HTML：

<!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>

CSS：

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

但是，当我尝试使用nav类在div的正下方添加h1标签时，我得到了：

https://cdn.discordapp.com/attachments/464823851151523850/496068123376615448/unknown.png

我在做什么错了？

Answer 1

HERE是一些有关浮动的有用信息

div.nav仅包含浮动元素，因此它的形状变得松散。您需要修复（请在我的代码段中检查CSS）：

body {margin: 0; font-family: 'Roboto', sans-serif;}

/* Fix for wrapping floating content */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* End of the fix */

.nav { background: #eee; }

.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;
}

<div class="nav clearfix">
            <a href="#" class="nav-title">Website</a>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link">Home</a></li>
                </ul>
            </nav>
    </div>
            <h1 class="title">My header</h1>

Answer 2

对我来说，一切看起来都很好。看看我的jsfiddle。如果希望h1出现在导航栏下方，则必须在CSS中定义.nav类。

还要在width: 100%上尝试overflow: hidden和.nav。可以解决问题。

https://jsfiddle.net/84nkfjr3/

导航栏在其后出现带有h1标签的怪异现象

2 个答案: