时间戳

首页 > 解决方案 > CSS 边距：0 自动打乱另一个 DIV 的对齐方式

javascript - CSS 边距：0 自动打乱另一个 DIV 的对齐方式

问题描述

<我的问题是当我用“返回顶部”按钮做任何事情时，它会弄乱“底部”div。在我添加“返回顶部”按钮后，它搞砸了底部 div。我试图涉足“底部” div 本身，但是，没有运气。我怎样才能让底部像它应该的那样居中？

.imagen {
padding-top:200px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 350px;
	height:auto;
	}
	body {
	margin:0;
	}

	#menulist {
	list-style-type: none;
	margin:0 auto;
	width:900px;
	padding-top:20px;
	padding-bottom:100px;
	}
	
	.linkactive {
	
	text-transform: uppercase;
	font-weight: 1000;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
	width: 190px;
	text-align: center;
	float: left;
	padding: 10px;
	background-color: white;
	color: black;
	}
	
	.link {
	text-transform: uppercase;
	font-weight: 1000;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
    width: 190px;
	text-align: center;
	float: left;
	padding: 10px;
	}
	
	.link:hover {
	cursor: pointer;
	color: grey;
	}
	.section1 {
	margin:0 auto;
	width:900px;
	text-align:center;
	font-weight: 1;
	}
	#reflection{

margin: 0 auto;
width:900px;
}



.bottom{
margin-top:100px;
width:100%;
height:200px;
background-color:#fffef9;
}

.section6{

margin: 0 auto;
width:900px;
}
#text6{
padding-top:100px;
font-weight: 1000;
font-family: 'Poiret One', cursive;
text-transform:uppercase;
text-align:center;
font-size:15px;
color:black;
letter-spacing: 5px;
}
#btt{
margin-top:100px;
margin-bottom:100px;
margin: 0 auto;
width:900px;
}
	a {
	text-transform: uppercase;
	font-weight: 1000;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
    width: 190px;
	text-align: center;
	float: left;
	
	color:black;
	text-decoration:none;
	}
	
	a:hover {
	cursor: pointer;
	color: grey;
	}
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Give+You+Glory" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Molle:400i" rel="stylesheet">


<body>

 <img class=imagen src='closed.jpg' onmouseover="this.src='open.jpg';" onmouseout="this.src='closed.jpg';" />

<div id="menubar">
     <ul id="menulist">
		
		
		<li class="link" onclick="reStyle(0)"><a href="Joseph Kwong resume.html">about</a></li>
		
         <li class="link" onclick="reStyle(1)"><a href="Joseph Kwong resume.1.html">portfolio</a></li>
         <li class="linkactive" onclick="reStyle(2)">reflection<li>
         <li class="link" onclick="reStyle(3)"><a href="Joseph Kwong resume.3.html">contact</a></li>
        
	</ul>
</div>
<div id="reflection"> 
	  
</div>

<div id="btt">
<a  href="Joseph Kwong resume.1.html" >BACK TO TOP<a>
</div>

<div class=bottom>
<div class=section6>

<p id="text6">Copyright © 2018 Joseph Kwong - All Rights Reserved.</p>
</div>
</div>
</body>

标签： javascripthtmlcssalignment

解决方案

您在标签/末尾留下了 a 。<a>尝试添加一个/，看看是否可以解决它。

<div id="btt">
<a  href="Joseph Kwong resume.1.html" >BACK TO TOP<a>
</div>

推荐阅读