CSS边距：0自动弄乱另一个DIV的对齐方式
[英]CSS margin: 0 auto messing up another DIV's alignment
问题描述
<我的问题是，当我使用“返回顶部”按钮执行任何操作时，它会使“底部” 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>
1 个解决方案
解决方案1
0 2018-07-26 23:04:05
您在<a>标记的末尾省略了/ 。 尝试添加/ ，看看是否可以解决。
<div id="btt">
<a href="Joseph Kwong resume.1.html" >BACK TO TOP<a>
</div>
将div调整为在主体的左侧和另一个div之间，并具有自动边距
[英]Adjusting div to be between the left side of body, and another div with a margin of auto
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.