基本上我希望页脚宽度为40em并且位于页面底部的中心，导航会执行此操作，但由于某种原因，页脚停留在左边距。
/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
/* Cancel out some differences between browser defaults */
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
* {
/* Padding and borders will be subtracted from the content box width, not added to it. */
box-sizing: border-box;
}
article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
/* Make sure the browser knows how to display HTML5 elements */
display: block;
}
header img{
display: block;
width: 30em;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
padding-bottom: 1em;
}
#wrap{
background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg);
background-repeat: repeat;
background-size: cover;
width: 100%;
height: 100%;
border: 1px;
}
nav {
width: 40em;
height: 3em;
background: light grey;
padding-top: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-right: auto;
margin-left: auto;
color: white;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
color: white;
width: calc(40em / 6);
}
nav ul li a, nav ul li a :visited {
display: block;
text-decoration: none;
color: #white;
}
nav ul li a: hover {
color: brown;
}
li a { text-decoration: none; color:#fff; }
li a:visited { text-decoration: none; color:#fff; }
li a:hover { text-decoration: none; color:#512e15; }
li a:focus { text-decoration: none; color:#fff; }
li a:hover, li a:active { text-decoration: none; color:#512e15; }
footer{
display: flex;
position: absolute;
bottom: 0px;
width: 40em;
margin-left: auto;
margin-right: auto;
height: 3em;
background-color: light grey;
padding-top: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
p, address, #phone, #email{
color: white;
padding-left: 1em;
padding-right: 1em;
font-size: .75em;
}
footer img{
height:1em;
width: 2em;
padding-left: 1em;
}
body{
display: flex;
}
aside{
display: inline-flex;
color: white;
font-size: 2em;
width: 50%;
height: 100%;
}
#body h1{
color: white;
margin-left: auto;
margin-right: auto;
font-size: 5em;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Great Art</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<body background="Images\flock_wallpaper_pattern_by_hydrogen666.jpg">
<div id= wrap>
<header>
<img src = "Images\Great Art logo for em.jpg" alt="Great Art Logo"> </img>
</header>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="Gallery.html">gallery</a></li>
<li><a href="artist biography.html">artist biography</a></li>
<li><a href="blog.html">blog page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="contact us.html">contact us</a></li>
</ul>
</nav>
<div id= body>
<h1>Artist Biography</h1>
<div id= leftSide>
<p>Vincent van Gogh, one of the most well-known post-impressionist artists, for whom color was the chief symbol of expression, was born in Groot-Zundert, Holland on March 30, 1853.
The son of a pastor, brought up in a religious and cultured atmosphere, Vincent was highly emotional, lacked self-confidence and struggled with his identity and with direction.
He believed that his true calling was to preach the gospel; however, it took years for him to discover his calling as an artist. Between 1860 and 1880, when he finally decided to
become an artist, van Gogh had already experienced two unsuitable and unhappy romances and had worked unsuccessfully as a clerk in a bookstore, an art salesman, and a preacher in the
Borinage (a dreary mining district in Belgium) where he was dismissed for overzealousness.
</p>
</div>
</div>
<footer>
<p> Great Art </p>
<address> PO Box 12-345 Christchurch </address>
<p id =phone> Phone: 03 345 6789 </p>
<p id= email> Email: hubert@great-art.org.nz </p>
<img src= "Images\fb-art.jpg"</img>
<img src= "Images\twitter logo.png"</img>
</footer>
</div>
</body>
</html>
任何帮助将不胜感激，我不知道还能转向哪里
答案 0 :(得分：1)
/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
/* Cancel out some differences between browser defaults */
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
* {
/* Padding and borders will be subtracted from the content box width, not added to it. */
box-sizing: border-box;
}
article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
/* Make sure the browser knows how to display HTML5 elements */
display: block;
}
header img{
display: block;
width: 30em;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
padding-bottom: 1em;
}
#wrap{
background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg);
background-repeat: repeat;
background-size: cover;
width: 100%;
height: 100%;
border: 1px;
}
nav {
width: 40em;
height: 3em;
background: light grey;
padding-top: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-right: auto;
margin-left: auto;
color: white;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
color: white;
width: calc(40em / 6);
}
nav ul li a, nav ul li a :visited {
display: block;
text-decoration: none;
color: #white;
}
nav ul li a: hover {
color: brown;
}
li a { text-decoration: none; color:#fff; }
li a:visited { text-decoration: none; color:#fff; }
li a:hover { text-decoration: none; color:#512e15; }
li a:focus { text-decoration: none; color:#fff; }
li a:hover, li a:active { text-decoration: none; color:#512e15; }
footer{
display: flex;
position: absolute;
bottom: 0px;
width: 40em;
margin-left: auto;
margin-right: auto;
height: 3em;
background-color: light grey;
padding-top: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
left: 0;
right: 0;
}
p, address, #phone, #email{
color: white;
padding-left: 1em;
padding-right: 1em;
font-size: .75em;
}
footer img{
height:1em;
width: 2em;
padding-left: 1em;
}
body{
display: flex;
}
aside{
display: inline-flex;
color: white;
font-size: 2em;
width: 50%;
height: 100%;
}
#body h1{
color: white;
margin-left: auto;
margin-right: auto;
font-size: 5em;
text-align: center;
}<div id= wrap>
<header>
<img src = "Images\Great Art logo for em.jpg" alt="Great Art Logo"> </img>
</header>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="Gallery.html">gallery</a></li>
<li><a href="artist biography.html">artist biography</a></li>
<li><a href="blog.html">blog page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="contact us.html">contact us</a></li>
</ul>
</nav>
<div id= body>
<h1>Artist Biography</h1>
<div id= leftSide>
<p>Vincent van Gogh, one of the most well-known post-impressionist artists, for whom color was the chief symbol of expression, was born in Groot-Zundert, Holland on March 30, 1853.
The son of a pastor, brought up in a religious and cultured atmosphere, Vincent was highly emotional, lacked self-confidence and struggled with his identity and with direction.
He believed that his true calling was to preach the gospel; however, it took years for him to discover his calling as an artist. Between 1860 and 1880, when he finally decided to
become an artist, van Gogh had already experienced two unsuitable and unhappy romances and had worked unsuccessfully as a clerk in a bookstore, an art salesman, and a preacher in the
Borinage (a dreary mining district in Belgium) where he was dismissed for overzealousness.
</p>
</div>
</div>
<footer>
<p> Great Art </p>
<address> PO Box 12-345 Christchurch </address>
<p id =phone> Phone: 03 345 6789 </p>
<p id= email> Email: hubert@great-art.org.nz </p>
<img src= "Images\fb-art.jpg"</img>
<img src= "Images\twitter logo.png"</img>
</footer>
</div>
向left元素声明right和footer值。
<强> CSS
footer {
display: flex;
position: absolute;
bottom: 0px;
width: 40em;
margin-left: auto;
margin-right: auto;
height: 3em;
background-color: light grey;
padding-top: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
left: 0;
right: 0;
}