我有一个Web设计课程项目。我正在创建我想出的一家计算机商店。但是我有几个问题。我已附上代码，向您展示原因。因此，我有几个带有float标签的DIV，并且在某些页面上它将整个页面移动了几个像素。我该如何解决？另外，我希望所有页面都居中并水平放置在同一位置，例如，每当我从新闻页面切换到首页时，该主页就应该向左移动十个像素，而不应该向左移动十个像素。直到我添加具有浮动样式的特色产品后，它才执行此操作。这是我的代码：
index.html（此页面移动了几个像素）
<!DOCTYPE html>
<html>
<head>
<title>Terry's Computers</title>
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="stylesheet" href="style/stylesheet.css">
<script src="script/scripts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" type="image/png" href="images/icon.png">
</head>
<body>
<div class="banner">
<img src="images/banner.jpg">
</div>
<div class="navigation">
<div class="navbar">
<a href="index.html" class="active">Home</a>
<a href="news.html">News</a>
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="cases.html">Cases</a>
<a href="motherboards.html">Motherboards</a>
<a href="processors.html">Processors</a>
<a href="graphics.html">Graphics Cards</a>
<a href="storage.html">Storage</a>
<a href="powersupplies.html">Power Supplies</a>
<a href="ram.html">RAM</a>
<a href="other.html">Other</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
</div>
</div>
<div class="contact" id="navright">
<a href="contact.html" style="float:right;">Contact</a>
</div>
</div>
</div>
<div class="featured">
<div id="l_product" style="background-color:white;">
<img src="images/featured.gif" class="featured_image">
</div>
<div id="r_product">
<p class="featured_text_title">ASUS Prime Z370-A</p>
<ul class="featured_text">
<li>the big yeet is the big yeet is the big yeet is the big yeet</li>
<li>the big yeet is the big yeet is the big yeet is the big yeet</li>
<li>the big yeet is the big yeet is the big yeet is the big yeet</li>
<li>the big yeet is the big yeet is the big yeet is the big yeet</li>
<li>the big yeet is the big yeet is the big yeet is the big yeet</li>
</ul>
<img src="images/buy_button.png" class="buy_button">
</div>
</div>
<div class="first">
<h1 class="title">Welcome</h1>
<p class="paragraph">
Here at Terry's Computers we are determined to make our customers experience as
stress free as possible. We will help every customer find the best deal possible
for their budget. Here we have computer parts such as motherboards, processors, and
more to offer. We also offer prebuilt computers that range from productivity, gaming,
or whatever the customer desires. We also take custom requests that can more suit our customers.
We can help you find the perfect computer that will satisfy your needs. If you have any
questions or suggestions head over to the <a href="contact.html">Contact</a> page and send us an email.
</p>
</div>
<div class="footer">
<div class="footertext">
<p>Here at Terry's Computers we do not claim to own any of
the products shown on this website.</p>
<a href="contact.html"><p>Contact Us</p></a>
</div>
</div>
</body>
</html>
这是正常页面：
news.html（页面在正确的位置）
<!DOCTYPE html>
<html>
<head>
<title>Terry's Computers - News</title>
<link rel="stylesheet" href="style/stylesheet.css">
<script src="script/scripts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" type="image/png" href="images/icon.png">
</head>
<body>
<div class="banner">
<img src="images/banner.jpg">
</div>
<div class="navigation">
<div class="navbar">
<a href="index.html" class="active">Home</a>
<a href="news.html">News</a>
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="cases.html">Cases</a>
<a href="motherboards.html">Motherboards</a>
<a href="processors.html">Processors</a>
<a href="graphics.html">Graphics Cards</a>
<a href="storage.html">Storage</a>
<a href="powersupplies.html">Power Supplies</a>
<a href="ram.html">RAM</a>
<a href="other.html">Other</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
<a href="#">Placeholder</a>
</div>
</div>
<div class="contact" id="navright">
<a href="contact.html" style="float:right;">Contact</a>
</div>
</div>
</div>
<div class="newsfooter">
<div class="footertext">
<p>Here at Terry's Computers we do not claim to own any of
the products shown on this website.</p>
<a href="contact.html"><p>Contact Us</p></a>
</div>
</div>
</body>
</html>
这是我的样式表：
stylesheet.css
body{
background-color: #201f38;
margin: 0;
}
.page{
width: 960px;
margin: auto;
}
.banner{
width: 960px;
margin: 15px auto;
}
.navigation{
width: 960px;
border: 3px solid black;
margin: auto;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: "Arial Black", Gadget, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #23004E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: "Arial Black", Gadget, sans-serif;
text-align: left;
}
.dropdown-content a:hover {
background-color: #23004E;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active{
background-color: #400089;
}
.first{
background-color: #6C01E5;
width: 960px;
margin: 15px auto;
border: 3px solid black;
}
.title{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 40pt;
margin: 15px 0px;
text-align: center;
}
.featured{
width: 960px;
border: 3px solid black;
background-color: #6C01E5;
margin: 15px auto;
height: 494px;
padding: 18px;
}
.featured_image{
padding: 22px;
}
#l_product{
float: left;
width: 450px;
border: 3px solid black;
border-radius: 10px;
font-family: "Arial Black", Gadget, sans-serif;
}
.featured_text_title{
font-family: "Arial Black", Gadget, sans-serif;
text-align: center;
font-size: 20pt;
}
.featured_text{
font-family: "Arial Black", Gadget, sans-serif;
width: 300px;
margin-left: 61px;
font-size: 10pt;
text-align: justify;
}
.buy_button{
width: 250px;
margin-left: 97px;
}
#r_product{
float: right;
width: 450px;
border: 3px solid black;
border-radius: 10px;
height: 450px;
background-color: #7143a5;
}
.suggestion_box{
width: 960px;
background-color: #1e2994;
border: 3px solid black;
margin: 15px auto;
height: 492px;
padding: 18px;
}
.paragraph{
text-indent: 50pt;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14pt;
text-align: justify;
width: 800px;
margin: 15px auto;
}
#container{
width: 960px;
overflow: hidden;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
margin: 15px auto;
margin-bottom: -33px;
height: 100%;
}
.box1, .box2, .box3, .box4 {
width: 226px;
border: 3px solid black;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-bottom: 15px;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
margin: auto;
}
.box1, .box2, .box3, .box4 {
background: #7143a5;
}
.box_image{
width: 200px;
margin: 10px auto;
margin-left: 10px;
border: 3px solid black;
}
.box_header{
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20pt;
font-weight: bold;
margin: 5px 0px 10px 0px;
}
.box_text{
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10pt;
margin: 0px;
}
.square_box2{
width: 471px;
border: 3px solid black;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-bottom: 26px;
background-color: #7143a5;
}
.box2_image{
width: 200px;
padding: 15px;
}
.box2_text{
margin-right: 0px;
float: right;
text-align: left;
text-indent: 50px;
width: 241px;
padding: 15px 0px;
}
.newsfooter{
width: 960px;
border: 3px solid black;
background-color: #333;
margin: 15px auto;
}
.footer{
width: 960px;
border: 3px solid black;
background-color: #333;
margin: auto;
}
.footertext{
text-align: center;
font-size: 9pt;
font-family: "Arial Black", Gadget, sans-serif;
color: white;
}
.footertext a{
font-size: 7pt;
}
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 450px;
height: 375px;
margin: 15px auto;
background: #7143a5;
border: 5px solid #000;
border-radius: 20px;
}
.close{
width: 25px;
margin: 5px;
margin-left: 410px;
}
#contact_page{
width: 960px;
padding: 18px;
border: 3px solid black;
background-color: #1e2994;
margin: 15px auto;
height: 492px;
}
.contact_header{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20pt;
text-align: center;
}
.contact_form{
width: 450px;
background-color: #7143a5;
border: 3px solid black;
padding: 15px 122px;
float: left;
height: 450px;
border-radius: 10px;
}
.contact_info{
width: 450px;
background-color: #7143a5;
border: 3px solid black;
float: right;
padding-top: 10px;
height: 450px;
border-radius: 10px;
}
#map{
border: 3px solid black;
}
.address{
font-style: italic;
text-align: center;
width: 200px;
}
input{
width: 200px;
font-family: "Arial Black", Gadget, sans-serif;
border: 3px solid black;
outline: none;
text-indent: 5px;
border-radius: 10px;
}
input[type="text"]{
font-family: "Arial Black", Gadget, sans-serif;
}
label{
font-family: "Arial Black", Gadget, sans-serif;
}
textarea{
width: 200px;
font-family: "Arial Black", Gadget, sans-serif;
border: 3px solid black;
outline: none;
text-indent: 5px;
border-radius: 10px;
max-width: 200px;
max-height: 90px;
width: 200px;
height: 90px;
min-width: 200px;
min-height: 90px;
}
.contacttext{
font-family: "Arial Black", Gadget, sans-serif;
}
.submit{
border: 3px solid black;
border-radius: 10px;
font-family: "Arial Black", Gadget, sans-serif;
width: 100px;
margin: 15px auto;
margin-left: 50px;
}
答案 0 :(得分：0)
添加父级（.container）类并为该父级设置宽度，无需为每个块设置宽度。
.container{
width: 960px;
margin: auto;
}
HTML：
<div class="container">
<div class="banner"></div>
<div class="navigation"></div>
<div class="featured"></div>
<div class="first"></div>
<div class="footer"></div>
</div>