Javascript 我的CSS乱七八糟，无法保持居中
我正在制作一个网站，我无法让导航栏停留在我想要的地方 即使在较小的屏幕上观看，也应该如此。请记住，我们只讨论导航栏 这就是它当前在较小屏幕上的外观 最后，这是我的代码Javascript 我的CSS乱七八糟，无法保持居中,javascript,css,html,Javascript,Css,Html,我正在制作一个网站，我无法让导航栏停留在我想要的地方 即使在较小的屏幕上观看，也应该如此。请记住，我们只讨论导航栏 这就是它当前在较小屏幕上的外观 最后，这是我的代码 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.mi
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<link rel="stylesheet" href="animate.css">
<style type="text/css">
body {
margin: 0;
background-color: #e0dfcb;
}
.container {
min-width: 800px;
height: auto;
}
#midbar {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #e0dfcb;
z-index: 1111;
opacity: 0.8;
}
#midbar img {
position: absolute;
top: 0px;
left:50%;
margin-left: -185px;
width: 350px;
height: 200px;
min-height: 50px;
min-width: 250px;
vertical-align: middle;
z-index: 2222;
}
#navigation {
position: absolute;
left: 435px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
position: absolute;
left: 1100px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#slideshow{
width: 100%;
height: 100%;
}
#slideshow{
-webkit-animation: cssAnimation 8s 16 ease-in-out;
-moz-animation: cssAnimation 8s 16 ease-in-out;
-o-animation: cssAnimation 8s 16 ease-in-out;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#imgholder {
position: relative;
top: -150px;
width: 100%;
height: 500px;
overflow: hidden;
}
#over {
width: 500px;
height: 200px;
background-color: #EEEEEE;
position: relative;
top: -400px;
font-size: 32px;
opacity: 0.7;
}
#over p {
position: relative;
left: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div id='midbar'>
<section id='navigation'>
<ul>
<li><a href='index.php'>About</a></li>
<li><a href='index.php'>Designs</a></li>
<li><a href='index.php'>Events</a></li>
</ul>
</section>
<a href='index.php'><img class='img animated bounceInDown' src='images/logo.png'></a>
<section id='navi'>
<ul>
<li><a href='index.php'>Booths</a></li>
<li><a href='index.php'>Holidays</a></li>
<li><a href='index.php'>Contact</a></li>
</ul>
</section>
</div>
<div id='imgholder'>
<img id="slideshow" src="images/snow.jpg" alt="Slideshow">
</div>
<div id='over'>
<p> Need help?<br>
Contact us now!</p>
</div>
</div>
<script type="text/javascript">
var img1 = new Image();
img1.src = "images/snow.jpg";
var img2 = new Image();
img2.src = "images/water.jpg";
var img3 = new Image();
img3.src = "images/othersnow.jpg";
var img4 = new Image();
img4.src = "images/cool.jpg";
var galleryarray = [img1, img2, img3, img4];
var curimg = 1;
function rotateimages(){
$( "#slideshow" ).fadeOut( "slow", function() {
document.getElementById("slideshow").setAttribute("src", galleryarray[curimg].src)
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
});
$( "#slideshow" ).fadeIn( "slow" );
}
window.onload=function(){
setInterval("rotateimages()", 8000)
}
</script>
</body>
</html>
身体{
保证金：0；
背景色：#e0dfcb；
}
.集装箱{
最小宽度：800px；
高度：自动；
}
#中栏{
位置：相对位置；
顶部：-20px；
宽度：100%；
高度：115px；
背景色：#e0dfcb；
z指数：1111；
不透明度：0.8；
}
#中杆img{
位置：绝对位置；
顶部：0px；
左：50%；
左边距：-185px；
宽度：350px；
高度：200px；
最小高度：50px；
最小宽度：250px；
垂直对齐：中间对齐；
z指数：2222；
}
#航行{
位置：绝对位置；
左：435px；
边框顶部样式：虚线；
边框底部样式：虚线；
边框宽度：2倍；
顶部：45px；
}
#导航ulli{
位置：相对位置；
显示：内联块；
利润率：0 23px 0 0；
z指数：3333；
}
#导航ulli a{
左侧填充：15px；
文字装饰：无；
文本对齐：居中；
右侧填充：15px；
颜色：#000000；
显示：块；
字体系列：“Gentium Book Basic”，衬线；
字号：18px；
}
#纳维{
位置：绝对位置；
左：1100px；
边框顶部样式：虚线；
边框底部样式：虚线；
边框宽度：2倍；
顶部：45px；
}
#纳维乌利酒店{
位置：相对位置；
显示：内联块；
利润率：0 23px 0 0；
z指数：3333；
}
#纳维乌尔李a{
左侧填充：15px；
文字装饰：无；
文本对齐：居中；
右侧填充：15px；
颜色：#000000；
显示：块；
字体系列：“Gentium Book Basic”，衬线；
字号：18px；
}
#幻灯片放映{
宽度：100%；
身高：100%；
}
#幻灯片放映{
-webkit动画：cssAnimation 8s 16易入易出；
-moz动画：cssAnimation 8s 16易入易出；
-o-动画：cssAnimation 8s 16缓进缓出；
}
@-webkit关键帧cssAnimation{
来自{webkit transform:rotate（0deg）scale（1.1）skew（1deg）translate（0px）；}
到{-webkit变换：旋转（0deg）比例（1.3）倾斜（1deg）平移（0px）；}
}
@-moz关键帧cssAnimation{
来自{moz变换：旋转（0deg）缩放（1.1）倾斜（1deg）平移（0px）；}
到{moz变换：旋转（0deg）比例（1.3）倾斜（1deg）平移（0px）；}
}
@-o关键帧cssAnimation{
从{-o变换：旋转（0deg）比例（1.1）倾斜（1deg）平移（0px）；}
到{-o变换：旋转（0deg）比例（1.3）倾斜（1deg）平移（0px）；}
}
#伊姆戈尔德{
位置：相对位置；
顶部：-150px；
宽度：100%；
高度：500px；
溢出：隐藏；
}
#结束{
宽度：500px；
嗨
#midbar {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #e0dfcb;
z-index: 1111;
opacity: 0.8;
}
#navigation {
position: absolute;
left: 435px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
position: absolute;
left: 1100px;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
<div id='midbar'>
<section id='navigation'>
<ul>
<li><a href='index.php'>About</a></li>
<li><a href='index.php'>Designs</a></li>
<li><a href='index.php'>Events</a></li>
</ul>
</section>
<a href='index.php'><img class='img animated bounceInDown' src='images/logo.png'> </a>
<section id='navi'>
<ul>
<li><a href='index.php'>Booths</a></li>
<li><a href='index.php'>Holidays</a></li>
<li><a href='index.php'>Contact</a></li>
</ul>
</section>
</div>
left: 1100px;
#midbar {
background-color: #e0dfcb;
height: 115px;
margin: 0 auto;
opacity: 0.8;
position: relative;
top: -20px;
width: 800px;
z-index: 1111;
}
#navigation {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
left: 0;
position: absolute;
top: 45px;
}
#navi {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
position: absolute;
right: 0;
top: 45px;
}
.top {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: green;
z-index: 1111;
opacity: 0.8;
margin: 0 auto;
width: 100%;
}
#midbar {
position: relative;
top: -20px;
width: 1000px;
height: 115px;
background-color: #e0dfcb;
z-index: 1111;
opacity: 0.8;
margin: 0 auto;
}
#navigation {
position: relative;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
width: 382px;
float: left;
}
#navi {
position: relative;
border-top-style: dotted;
border-bottom-style: dotted;
border-width: 2px;
top: 45px;
float: right;
}