【发布时间】：2021-01-24 02:39:03
【问题描述】：
我的页脚位于页面中间 - 我对编码非常陌生，只是为课程做一个非常基本的网站。我的页脚在我的其他页面上还可以，但是这个页面有一个表单，所以我不确定这是否会以某种方式影响它？
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a {
color: #ffffff;
text-decoration: none;
}
ul {
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li {
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
}
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
form {
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text],
select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>Collision Guru</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
<a href="auto2.html">Home</a>
</li>
<!-- list item two -->
<li>
<a href="aboutauto2.html">About</a>
</li>
<!-- list item three -->
<li>
<a href="service3.html">Services</a>
</li>
<!-- list item four -->
<li>
<a>Contact</a>
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1>
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="text" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage@gmail.com
</div>
<div class="sociallinks">
<img src="facebook-icon.png" width=30px height=30px> <img src="IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>再说一次，我是新手，如果有什么看起来很疯狂，我很抱歉。在接下来的几天内的任何回复将不胜感激:)
【问题讨论】：
-
你能提供截图吗？
-
网站不是一张纸。他们不需要页脚。