问题描述
For Image of the problem Click Here
这是我的HTML代码
<!DOCTYPE html>
<html lang="en" >
<head>
<Meta charset="UTF-8">
<title>Smileybook</title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap" rel="stylesheet">
<link href="buttonstyle.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<style>
div {
margin-bottom: ;
padding: ;
}
.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
.info {
margin-top: ;
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
border-radius: 5px;
transition: opacity 1s;
}
.warning {
background-color: #ffffcc;
border-left: 6px solid #ffeb3b;
}
.closebtn {
margin-left: 5px;
color: black;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 30px;
cursor: pointer;
transition: 0.5s;
}
.closebtn:hover {
color: black;
}
</style>
<style>
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
Box-shadow: inset 0 0 5px grey;
border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #50D3C9;
border-radius: 100px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #50D3C9;
}
</style>
<style>
.buttonhover {
border-radius: 40px;
background-image: linear-gradient(90deg,rgb(2,200) 0%,rgb(9,9,121) 0%,rgb(0,212,255) 100%);;
border: solid;
color: #FFFFFF;
text-align: center;
font-size: 13px;
padding: 14px;
width: 135px;
transition: all 0.5s;
cursor: pointer;
margin-top: 5px;
margin-bottom: 5px;
}
.buttonhover span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonhover span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.buttonhover:hover span {
padding-right: 25px;
}
.buttonhover:hover span:after {
opacity: 1;
right: 0;
}
</style>
<style>
/* Full-width input fields */
input[type=text],input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
Box-sizing: border-Box;
}
/* Set a style for all buttons */
button {
background-color: #2FEA14;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #FFF300;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: manual; /* Enable scroll if needed */
background-color: rgb(0,0); /* Fallback color */
background-color: rgba(0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top,15% from the bottom and centered */
border: 1px solid #888;
border-radius: 5px ; width: 80%; /* Could be more or less,depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 3%;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
</div>
<ul id="nav-1">
<li class="slide1"></li>
<li class="slide2"></li>
<li><a href="#">Alpha</a></li>
<li><a href="#">Beta</a></li>
<li><a href="#">Gamma</a></li>
<li><a href="#">Delta</a></li>
<li><a href="#">Epsilon</a></li>
<li><a href="#" onclick="document.getElementById('id01').style.display='block'">Login</a></li>
</ul>
<div class="info">
<span class="closebtn">×</span>
<b>Info!</b> You are currently on latest version of Smileybook
<i>Smileybook 1.2</i>
Subscribe to Smileybook Notifications and Share you comments on Mail.
</div>
<button class="btn submit_btn form-control" onclick="document.getElementById('id01').style.display='block'" style="width:20px,">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="https://yashdamani.000webhostapp.com/account/account.html">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close ">×</span>
</div>
<div class="container">
<label><b><i><font color="70bafe">Username</font></i></b>
</label>
<input type="text" placeholder="Enter Username"name="user" required>
<label><b><i><font color="70bafe" >Password</font></i></b></label>
<input type="password" placeholder="Enter Password" name="pass" required>
<a href="https://yashdamani.000webhostapp.com/account/account.html" accesskey="enter">
<button class="btn submit_btn form-control" onclick="document.getElementById('id01').style.display='block'" style="width:20px," type="submit">Login</button></a>
<br>
<input type="checkBox" checked="checked">
<font color="70bafe" > Remember me
</font>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">
<font color="0A026A"><b>Cancel</b></font></button>
<br>
<a href="https://yashdamani.000webhostapp.com/forgotpassword.html" accesskey="" ><font color="70bafe" > Forgot Password?</a></font>
<hr color="70bafe">
</div>
</div>
</form>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal,close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function(){ div.style.display = "none"; },600);
}
}
</script>
<script src='./jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
和样式css
#nav-1 {
position: absolute;
border: none;
float: none;
border-radius: 20em;
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
list-style: none;
background: #f5f5f5;
Box-shadow: 20px 40px 40px #00000033;
padding: 10px;
}
#nav-1 li {
margin: 0px;
}
#nav-1 li a {
position: relative;
padding: 0.6em 2em;
font-size: 18px;
border: none;
outline: none;
color: #333;
display: inline-block;
text-decoration: none;
z-index: 3;
}
#nav-1 .slide1,#nav-1 .slide2 {
position: absolute;
display: inline-block;
height: 3em;
border-radius: 10em;
-webkit-transition: all 0.6s cubic-bezier(0.23,1,0.32,1.05);
transition: all 0.6s cubic-bezier(0.23,1.05);
}
#nav-1 .slide1 {
background-color: lightblue;
z-index: 2;
}
#nav-1 .slide2 {
opacity: 0;
background: #ddd;
z-index: 1;
}
#nav-1 .squeeze {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
*,*::before,*::after {
Box-sizing: border-Box;
}
html,body {
height: 80px;
}
body {
display: -webkit-Box;
display: flex;
-webkit-Box-pack: center;
justify-content: center;
-webkit-Box-align: center;
align-items: center;
background-color: #e0e0e0;
font-family: Montserrat,sans-serif;
line-height: 1.5;
background: white;
}
这是我正在使用的新网站。最近，我看到了这个导航栏，并喜欢使用它，以为可以使用它，但是现在却面临着彼此浮动的问题。我在上面附加了相同的代码以及图像。 Navbar overflow problem picture (click here) 因此，我只是想尽快解决此问题，因为我的托管日期不太远。 请检查我的密码。
解决方法
尝试一下： 将padding-top添加到“ info”类。
.info{
padding-top:50px;
}
尝试为元素添加页边空白 或padding-top
.info {
margin-top 50px;
}