Question

我正在为我的学生俱乐部开发新网站，它需要在9月之前准备好。我当前的草稿在右侧有多余的黑色空间，并且我不需要水平滚动条。我试图找出是什么原因造成的，但是我遇到了麻烦，因为该站点的以前的草稿都没有右边的多余黑色空间。有人可以帮忙吗？

 body, html {
      height: 100%;
      margin: 0;
      font: 400 15px/1.8 "Lato", sans-serif;
      color: #777;
    }
    
    .bgimg-1, .bgimg-2, .bgimg-3 {
      position: relative;
      opacity: 1;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    
    }
    .bgimg-1 {
      background-image: url(background.jpeg);
      height: 100%;
    }
    
    .caption {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      margin: 0 auto;
      color: #2797fb;
      background-color: #000;
      font-size: 45px;
      font-weight: bold;
      <!-- text-shadow: #FFF 1px 1px 1px; -->
      letter-spacing: 2px;
    }
    
    .caption span.border {
      <!-- background-color: #b7d8fd; -->
      <!-- color: #000; -->
      <!-- position: center; -->
      margin-left: auto;
      margin-right: auto;
    
    }
    
    .menu {
      position: absolute;
      right: 50px;
      top: 50px;
      width: 40%;
      text-align: right;
      text-transform: uppercase;
      color: #eee;
    }
    
    p {
      font: "Lato", sans-serif;
      color: #eee;
    }
    
    h1 {
      font: "Lato", sans-serif;
      color: #eee;
      position: absolute;
    }
    
    h2 {
      font: "Lato", sans-serif;
      color: #eee;
    }
    
    h3 {
      letter-spacing: 5px;
      text-transform: uppercase;
      font: 20px "Lato", sans-serif;
      color: #111;
    }
    
    .logo {
      display: block;
      background: url(logo.png);
      position: absolute;
      left: 34.5%;
      top: 10%;
      background-size: contain;
      width: 398px;
      height: 157px;
    }
    
    .btn {
        background-color: #2797fb;
        border: 2px solid #2797fb;
        color: black;
        padding: 12px 16px;
        font-size: 16px;
        cursor: pointer;
    	    -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
    
    .btn:hover {
        background-color: black;
        border: 2px solid #2797fb;
        color: white;
        padding: 12px 16px;
        font-size: 16px;
        cursor: pointer;
    }
    
    <style type="text/css">
        .Table
        {
            display: table;
        }
        .Title
        {
            display: table-caption;
            font-weight: bold;
            font-size: larger;
        }
        .Heading
        {
            display: table-row;
            font-weight: bold;
            text-align: ;
        }
        .Row
        {
            display: table-row;
    		font-weight: bold;
        }
        .Cell
        {
            display: table-cell;
            border: none;
            border-width: thin;
            padding-left: 5px;
            padding-right: 5px;
        }
    	
    
    	.marg{
        margin-left: 20%;
        margin-right: 20%;
    	margin-top: 0px;
    	}
    	
    	.relative-OS {
    	position: relative;
    	right: 0px;
    	bottom: 0px;
    	}
    	
    	#dotted-border {
        box-sizing: content-box;    
        width: 750px;
        height: 50px;
        padding-left: 10px;    
        border: 2px dotted white;
    	}
    	
    	div.relative-fast {
        position: relative;
        right: 75px;
    	top: 80px;
    	}
    	
    	div.relative-fastinfo {
        position: relative;
        left: 25px;
    	bottom: 70px;
    	}
    	
    	div.relative-secure {
        position: relative;
        right: 90px;
    	top: 80px;
    	}
    	
    	div.relative-secureinfo {
        position: relative;
        left: 25px;
    	bottom: 80px;
    	}
    	
    	div.relative-easy {
        position: relative;
        right: 75px;
    	top: 80px;
    	}
    	
    	div.relative-easyinfo {
        position: relative;
        left: 25px;
    	bottom: 80px;
    	}
    	
    	
    <!----------------------------------------------------------------------------->
    	
    	
    	#Cell-1
    {
    	width:33%;
    	float:left;
    	background:#fff;
    	padding-bottom:10px;
    }
    	
    	.horizontal_dotted_line{
    	border-bottom: 1px dotted #808080;
    	width: 560px;
    	} 
    	
    	div.relative-DL1 {
        position: relative;
        left: 130px;
    	bottom: 201px;
    	}
    	
    	div.relative-DL2 {
        position: relative;
        left: 130px;
    	bottom: 144px;
    	}
    	
    	div.relative-DL3 {
        position: relative;
        left: 130px;
    	bottom: 212px;
    	}
    	
    	div.relative-DL4 {
        position: relative;
        left: 130px;
    	bottom: 155px;
    	}
    	
    	div.relative-DL5 {
        position: relative;
        left: 130px;
    	bottom: 211px;
    	}
    	
    	div.relative-DL6 {
        position: relative;
        left: 130px;
    	bottom: 156px;
    	}
    	
    	.transparent
        {
    
            color: rgba(0, 0, 0, 0.5);
        }
    	
    	div.subheading {
        background-color: none;
        width: 500px;
    	height: 170px;
        border: 0px solid white;
        padding: 20px;
        margin: 0px;
    	}
    
    	div.relative-subheading {
        position: relative;
        left: 27.5%;
    	bottom: 300px;
    	}	
    	
    	div.box {
        background-color: black;
        width: 500px;
    	height: 250px;
        border: 10px solid white;
        padding: 25px;
        margin: 0px;
    	}
    
    	div.relative-box {
        position: relative;
        left: 27%;
    	bottom: 375px;
    	}
    
    	div.relative-caption {
        position: relative;
        left: 0px;
    	bottom: 500px;
    	}
    	
    	div.relative-body {
        position: relative;
        left: 0px;
    	bottom: 420px;
    	}
    	
    	div.contactbox {
        background-color: black;
        width: 700px;
    	height: 100px;
        border: 10px solid white;
        padding: 10px;
        margin: 10px;
    	}
    	
    	.timeline-title{
    	position: relative;
    	bottom: 390px;
    	}
    	
    	.vertical_dotted_line{
    	border-left: 2px dotted white;
    	height: 2350px;
    	}
    	
    	div.relative-roadmap {
        position: relative;
        left: 49.5%;
    	bottom: 400px;
    	}
    	
    	.dot {
        height: 25px;
        width: 25px;
        background-color: black;
        border-radius: 50%;
        display: inline-block;
    	border: 4px solid #2797fb;
    	}
    	
    	.dot1 {
        position: relative;
        right: 19.60%;
    	top: 30px;
    	}
    	
    	.roadmap-box-L {
        background-color: white;
        width: 200px;
    	height: 300px;
        border: 0px solid white;
        padding-top: 5px;
    	padding-left: 15px;
    	padding-right: 15px;
    	padding-bottom 15px;
        margin: 0px;
    	float: left;
    	}
    
    	.relative-roadmap-box-L1 {
        position: relative;
        right: 22.5%;
    	top: 30px;
    	}
    	
    	.roadmapIMG-R1 {
        position: relative;
        right: 14%;
    	bottom: 12px;
    	}
    
    	.dot2 {
        position: relative;
        right: 19.6%;
    	bottom: 305px;
    	}
    	
    	.roadmap-box-R {
        background-color: white;
        width: 200px;
    	height: 300px;
    	border: 0px solid white;
    	padding-top: 5px;
    	padding-left: 15px;
    	padding-right: 15px;
    	padding-bottom 15px;
    	margin: 0px;
    	float: right;
    	}
    	
    	.relative-roadmap-box-R1 {
    	position: relative;
    	right: 77.5%;
    	bottom: 305px;
    	}
    	
    	.roadmapIMG-L1 {
    	position: relative;
    	right: 20.25%;
    	top: 5px;
    	}
    	
    	.dot3 {
        position: relative;
        right: 22.55%;
    	top: 25px;
    	}
    	
    	.relative-roadmap-box-L2 {
        position: relative;
        right: 22.5%;
    	top: 25px;
    	}
    	
    	.roadmapIMG-R2 {
        position: relative;
        right: 13.99%;
    	bottom: 17px;
    	}
    	
    	.dot4 {
        position: relative;
        right: 19.6%;
    	bottom: 303.5px;
    	}
    	
    	.relative-roadmap-box-R2 {
        position: relative;
        right: 77.5%;
    	bottom: 305px;
    	}
    	
    	.roadmapIMG-L2 {
        position: relative;
        right: 20.25%;
    	top: 5px;
    	}
    	
    	.dot5 {
        position: relative;
        right: 22.55%;
    	top: 25px;
    	}
    	
    	.relative-roadmap-box-L3 {
        position: relative;
        right: 22.5%;
    	top: 25px;
    	}
    	
    	.roadmapIMG-R3 {
        position: relative;
        right: 13.99%;
    	bottom: 17px;
    	}
    	
    	.dot6 {
        position: relative;
        right: 19.6%;
    	bottom: 303.5px;
    	}
    	
    	.relative-roadmap-box-R3 {
        position: relative;
        right: 77.5%;
    	bottom: 305px;
    	}
    	
    	.roadmapIMG-L3 {
        position: relative;
        right: 20.25%;
    	top: 5px;
    	}
    	
    	.dot7 {
        position: relative;
        right: 22.55%;
    	top: 25px;
    	}
    	
    	.relative-roadmap-box-L4 {
        position: relative;
        right: 22.5%;
    	top: 25px;
    	}
    	
    	.roadmapIMG-R4 {
        position: relative;
        right: 13.99%;
    	bottom: 17px;
    	}
    	
    @-webkit-keyframes fadeInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
       </head>
    
    
    
    <body style="background-color:black;">
    
    <div class="bgimg-1">
      <div class="logo"></div>
      <div align="right" class="topnav-right">
    		<a href="locallink.html"><button class="btn"><strong>MENU NAME</strong></button></a>
    	</div>
    	</div>
    	
    </body>
        <!-- <span class="border">BACKGROUND IMAGE</span> -->
    
    <!-- <div style="display:flex;justify-content:center;align-items:flex-end;width:700px;">Text Content</div> -->
    <body style="background-color:black;">
    
    	<div class="subheading relative-subheading">
    	<h2 style="color:#2797fb;"><center><strong>
    Text</br>
    Text
    	</strong></center></h2>
    	</div>
    	
    	<div class="box relative-box">
    	<font style="color:white">Insert content here please</font>
    	</div>
    
    	<div class="timeline-title">
    	<h2 style="color:#2797fb;"><center><strong>
    	Timeline Title
    	</strong></center></h2>
    	</div>
    	
    	<div class="vertical_dotted_line relative-roadmap">
    			<div class="roadmap-box-L relative-roadmap-box-L1">
    				<h3>Step 1</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    		<div class="dot dot1">
    		</div>
    			<div class="roadmapIMG-R1">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    			
    			<div class="roadmapIMG-L1">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    		<div class="dot dot2">
    		</div>
    			<div class="roadmap-box-R relative-roadmap-box-R1">
    				<h3>Step 2</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    			
    			<div class="roadmap-box-L relative-roadmap-box-L2">
    				<h3>Step 3</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    		<div class="dot dot3">
    		</div>
    			<div class="roadmapIMG-R2">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    			
    			<div class="roadmapIMG-L2">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    		<div class="dot dot4">
    		</div>
    			<div class="roadmap-box-R relative-roadmap-box-R2">
    				<h3>Step 4</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    			
    			<div class="roadmap-box-L relative-roadmap-box-L3">
    				<h3>Step 5</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    		<div class="dot dot5">
    		</div>
    			<div class="roadmapIMG-R3">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    			
    			<div class="roadmapIMG-L3">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    		<div class="dot dot6">
    		</div>
    			<div class="roadmap-box-R relative-roadmap-box-R3">
    				<h3>Step 6</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    			
    			<div class="roadmap-box-L relative-roadmap-box-L4">
    				<h3>Step 7</h3>
    				<p style="color: black">
    				Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text. Please insert text.
    				</p>
    			</div>
    		<div class="dot dot7">
    		</div>
    			<div class="roadmapIMG-R4">
    				<img src="dummyIMG-200x300.png" width="200px" height="300px">
    			</div>
    	</div>
      
      <div class="marg relative-body">
      <h1 style="color:#2797fb;" id="dotted-border" class="relative-OS"><span id="Our_Software">SUBHEADING</span></h1>
    	</br>
    
    <div>
      </br><div class="img-with-text">
      <img src="image.png"  width="100px" border="0px" style="float: left; clear: left">
      <div class="relative-fast"><h2 style="color:#2797fb;">Fast</h2></div>
      </div>
    	<p class="ex1">
    		<div class="Cell relative-fastinfo" width="200">
                <p><font size="3">
    				TextTextText</br>
    				<font class="transparent">
    				.................................................
    				</font></br>
    				TextTextText</br>
    				<font class="transparent">
    				.................................................
    				</font></br>
    				TextTextText
    			</font></p>
            </div>
    		
            <div class="Cell relative-fastinfo">
    			<p><font size="3">
    				&rarr;</br>
    				<font class="transparent">
    				.........
    				</font></br>
    				&rarr;</br>
    				<font class="transparent">
    				.........
    				</font></br>
    				&rarr;
    			</font></p>
            </div>
            <div class="Cell relative-fastinfo">
                <p><font size="3">
    				TextTextText</br>
    				<font class="transparent">
    				..............................................................
    				</font></br>
    				TextTextText</br>
    				<font class="transparent">
    				..............................................................
    				</font></br>
    				TextTextText
    			</font></p>
            </div>
    	</p>
    </div>
    
    
    <div class="horizontal_dotted_line relative-DL1"></div>
    <div class="horizontal_dotted_line relative-DL2"></div>
    
    
    <div>
    <div class="img-with-text">
    <img src="image.png"  height="100px" border="0px" style="float: left; clear: left">
    	<div class="relative-secure">
    	<h2 style="color:#2797fb;">TextText</h2>
    	</div>
    </div>
    	<p>
    		<div class="Cell relative-secureinfo" width="200">
                <p><font size="3">
    				TextTextText</br>
    				<font class="transparent">
    				.................................................
    				</font></br>
    				TextTextText</br>
    				<font class="transparent">
    				.................................................
    				</font></br>
    				TextTextText
    			</font></p>
            </div>
            <div class="Cell relative-secureinfo">
    			<p><font size="3">
    				&rarr;</br>
    				<font class="transparent">
    				.........
    				</font></br>
    				&rarr;</br>
    				<font class="transparent">
    				.........
    				</font></br>
    				&rarr;
    			</font></p>
            </div>
            <div class="Cell relative-secureinfo">
                <p><font size="3">
    				TextTextText</br>
    				<font class="transparent">
    				..............................................................
    				</font></br>
    				TextTextText</br>
    				<font class="transparent">
    				..............................................................
    				</font></br>
    				TextTextText
    			</font></p>
            </div>	
    	</p>
    </div>
    
    <div class="horizontal_dotted_line relative-DL3"></div>
    <div class="horizontal_dotted_line relative-DL4"></div>
    
    <div>
    <div class="img-with-text">
    <img src="image.png"  height="100px" border="0px" style="float: left; clear: left">
    	<div class="relative-easy">
    	<h2 style="color:#2797fb;">Easy</h2>
    	</div>
    </div>
    	<p>
    		<div class="Cell relative-easyinfo" width="200">
                <p><font size="3">
    				please insert text here</br>
    				<font class="transparent">
    				.................................................
    				</font></br>
    				TextTextText</br>
    				<font class="transparent">
    				.................................................
    				</font></br>
    				TextTextText
    			</font></p>
            </div>
            <div class="Cell relative-easyinfo">
    			<p><font size="3">
    				&rarr;</br>
    				<font class="transparent">
    				.........
    				</font></br>
    				&rarr;</br>
    				<font class="transparent">
    				.........
    				</font></br>
    				&rarr;
    			</font></p>
            </div>
            <div class="Cell relative-easyinfo">
                <p><font size="3">
    				TextTextText</br>
    				<font class="transparent">
    				..............................................................
    				</font></br>
    				TextTextText</br>
    				<font class="transparent">
    				..............................................................
    				</font></br>
    				TextTextText
    			</font></p>
            </div>
    	</p>
    </div>
     
    <div class="horizontal_dotted_line relative-DL5"></div>
    <div class="horizontal_dotted_line relative-DL6"></div>
    
      <div class="text contactbox">
      <h1 style="color:#2797fb;"><span id="Contact_Us">Contact Us</span></h1></br></br>
      <p>For assistance, please contact <a href="mailto:info@xyz.com" style="color:white">info@xyz.com</a></p>
     </div>
    
    </div>
    
    
    </body>
    </html>

Answer 1

将所有left: ''更改为margin-left: ''，将right: ''更改为margin-right:''。通常，使用左和右不适用于相对元素。这样可以解决问题。

Answer 2

将overflow-x: hidden;添加到body CSS中。

body, html {
   height: 100%;
   margin: 0;
   font: 400 15px/1.8 "Lato", sans-serif;
   color: #777;
   overflow-x: hidden;
}

这只是一个快速修复。有造成额外黑色区域的原因，将在以后进行介绍。现在，这应该可以工作。它正在我的浏览器上运行。

UPDATE

我认为您对relative过于关注。 Simranjit Singh可能在其中用{em> margins 替换了left和right。是造成这些巨大屏幕宽度的原因。

老实说，您的代码确实确实需要很多改进：）

就像您将样式标签放在样式标签中一样。

<style>
    <style>
        ...
    </style>
</style>

尽管您将样式分开，但您仍在html标签中添加了更多样式。

尝试将所有相似的样式放在一起。

例如，您的大多数img都有width="200px"和height="300px"

由于它们的宽度和高度都相同，因此只需给它一个类，例如 roadmap-img 并将其添加到CSS样式中即可：

.roadmap-img {
   width:200px;
   height:300px;
}

如果您使事情简单而有条理，那么在代码中查找问题将变得更加容易。

但是无论如何，对于额外的空间，您必须重新考虑自己在做什么，并减少对亲戚的依赖。

我拥有的overflow-x解决方案将起作用，但是从长远来看，如果仅使代码更加井井有条，更简单，那就会更好。

为什么我的网站右侧有多余的黑色空间？

2 个答案: