自分のHTML文書内のナビゲーションが割り当てられたdivにとどまっていません。私はdivの中にナビゲーションを配置し、それはその内部にとどまっていません。私はなぜ私のヘッダーが今のところ伸びているのか知りたい。ナビゲーションは、その下にないヘッダーと同じ行になければなりません。彼らは両方とも同じ部門に入っています!ではなぜ彼らはそれを見せていないのですか? Plzヘルプ。 ありがとう!div内にナビゲートしていない
.navigation-bar {
bottom: 0px;
display: block;
padding-top: 70px;
padding-bottom: 70px;
background-color: #fff;
color: rgba(0, 0, 0, .74);
text-transform: uppercase;
border: 2px solid red;
position: relative;
}
.brand-text {
display: block;
overflow: visible;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
float: none;
clear: none;
-webkit-transition: color 700ms ease;
transition: color 700ms ease;
font-family: Georgia, Times, 'Times New Roman', serif;
color: #000;
font-size: 40px;
line-height: 36px;
font-weight: 700;
text-decoration: none;
border: 1px solid blue;
}
.brand-text:hover {
color: #858585;
}
a {
text-decoration: none;
}
.nav-menu {
position: relative;
float: right;
border: 1px solid green;
}
.nav-link {
padding-top: 7px;
padding-bottom: 7px;
padding-right: 20px;
padding-left: 20px;
border: 1px none #858585;
-webkit-transition: color 700ms ease, border 700ms ease;
transition: color 700ms ease, border 700ms ease;
font-family: Georgia, Times, 'Times New Roman', serif;
color: #000;
line-height: 18px;
font-weight: 400;
position: relative;
}
.nav-link:hover {
border-style: none;
border-bottom-width: 1px;
border-bottom-color: #858585;
color: #858585;
}
.nav-link.w--current {
border-style: none none solid;
border-bottom-width: 1px;
border-bottom-color: #000;
-webkit-transition: color 700ms ease;
transition: color 700ms ease;
font-family: Georgia, Times, 'Times New Roman', serif;
color: #000;
line-height: 18px;
font-weight: 400;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
.nav-link.w--current:hover {
color: #858585;
}
.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
display: block;
position: relative;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Stylesheet.css">
</head>
<body>
<section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ">
<div class="w-container">
<a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">
<h1 class="brand-text">Website</h1>
</a>
<nav class="nav-menu w-nav-menu" role="navigation">
<a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a>
<a class="nav-link w-nav-link" href="About">About</a>
<a class="nav-link w-nav-link" href="Contact">Contact</a>
<a class="nav-link w-nav-link" href="Blog">Blog</a>
</nav>
</div>
</section>
</body>
チェックこのリンクを助けなら、私に知らせて/ /learn.shayhowe.com/html-css/positioning-content/ –