Question

＆＃13;

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}

nav {
    line-height:30px;
    background-color:gainsboro;
    height:548px;
    width:100px;
    float:left;
    padding:px;
}

body {
	background-color:Lavender;
}

article {
	float:right;
	height:1250px;
	width:580px;
	text-align:center;
	padding:1em;
	background-color:#5DADE2;
}

section {
    float:left;
	height:1320px;
	width:600px;
	text-align:center;
    padding:0em;  
	background-color:#ECF0F1
}

footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;    
}

div.container {
	width:100%;
	border:2px solid purple;
}

.clearfix {
	overflow: auto;
}

.clear {
    clear:right;
    line-height:0;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>

<title>Links - Bannerlord Assignment</title>

<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">

</head>

<div class="container">

<body>

<header>

<h1>Further Information</h1>

</header>

<nav>
<a href="Home.html">Home</a><br>
<a href="About.html">About</a><br>
<a href="Media.html">Media</a><br>


</nav>

</body>

</div>

<br class="clear" />

</html>

＆＃13;

请与我相提并论我知道这是基本的麻木，但我需要从某个地方开始，我无法找到答案，也无法找到原因。

我的导航栏不对应我div的边框，这不是一个问题，但我如何得到它，以便导航栏和标题在我使用边框时不会重叠，因为截至目前，div边界仅在标题上工作。

Answer 1

您是否考虑过为导航栏添加5px上边距，这将占5px边框......我想。我还在学习。祝你好运，我一直在看。

此外，你总是希望身体成为页面上呈现的最外层的东西。所以任何容器都必须在其中。

Answer 2

你需要向容器隐藏溢出。

＆＃13;

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}

nav {
    line-height:30px;
    background-color:gainsboro;
    height:548px;
    width:100px;
    float:left;
    padding:px;
}

body {
	background-color:Lavender;
}

article {
	float:right;
	height:1250px;
	width:580px;
	text-align:center;
	padding:1em;
	background-color:#5DADE2;
}

section {
    float:left;
	height:1320px;
	width:600px;
	text-align:center;
    padding:0em;  
	background-color:#ECF0F1
}

footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;    
}

div.container {
	width:100%;
	border:2px solid purple;
    overflow: hidden;
}

.clearfix {
	overflow: auto;
}

.clear {
    clear:right;
    line-height:0;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>

<title>Links - Bannerlord Assignment</title>

<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">

</head>

<div class="container">

<body>

<header>

<h1>Further Information</h1>

</header>

<nav>
<a href="Home.html">Home</a><br>
<a href="About.html">About</a><br>
<a href="Media.html">Media</a><br>


</nav>

</body>

</div>

<br class="clear" />

</html>

＆＃13;

Answer 3

问题是a）你的身体标签位于错误的位置（应该在头部之前开始，并在html标签和b之前结束）容器上没有高度声明。

将此代码添加到CSS：

<br>

并且这个应该有效。

html,body {
    background-color:Lavender;
  height:100%;
}

div.container {
    width:100%;
  height:100%;
    border:2px solid purple;
}

我的导航栏不适合我的div.container？

3 个答案: