Html 幻灯片显示越顶导航栏和导航栏元素定位_Html_Css

Html 幻灯片显示越顶导航栏和导航栏元素定位

html css

Html 幻灯片显示越顶导航栏和导航栏元素定位,html,css,Html,Css,我试图将“主页”、“新闻”等元素块移动到中间位置，或将其放置在导航栏中我想要的位置。我试着在ul部分使用“左”，但它移动了整个导航条 CSS section <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <head&g

我试图将“主页”、“新闻”等元素块移动到中间位置，或将其放置在导航栏中我想要的位置。我试着在ul部分使用“左”，但它移动了整个导航条

CSS section
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<head>

<!-- nav section -->
<style>

body {margin:0;}
body {
    background-color: #393939;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    position: fixed;
    top: 0;
    width: 100%;
    left:0px;

}

li {
     float: left;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 22px 22px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

#wrapper {
width: 720px;
margin:  auto;

}

#slideshow {
padding: 15px 40px;

  }

h1{
    font-size: 40px;
    margin-top:35%;
    margin-left:-27%;
    font-style: italic;
    font-size: 28px;
    font-variant: small-caps;
    overflow: hidden;

}
h1:after {
 background-color: gray;
 content: "";
 display: inline-block;
 height: 1px;
 position: static;
 vertical-align: middle;
 width: 70%;
  left: 0.5em;
 margin-right: -50%;
}

#images{
    float: left;
    margin: 0px 0px 10px -150px;}
    }

</style>
</head>
<body>

<div id="wrapper"> 
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Trailers</a></li>
  <li><a href="#about">Series</a></li>
</ul>

<!-- end of nav section -->


 HTML SECTION
    <!-- slideshow -->
    <div id="slideshow"> 
    <h2 class="w3-center">Manual Slideshow</h2>

    <div class="w3-content" style="max-width:750px;position:relative;left:-200px;height:200px;">

    <img class="mySlides" src="images/1.jpg" style="width:100%;height:380px;">
    <img class="mySlides" src="images/2.jpg" style="width:100%">   
    <img class="mySlides" src="images/3.jpg" style="width:100%">
    <img class="mySlides" src="images/8.jpg" style="width:100%">

    <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">></a>
    <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"><</a>
    </div>

    <script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";
    }

    </script>
    <!-- end of slideshow -->
    </div>

    </body>

    </html>

CSS部分
正文{页边距：0；}
身体{
背景色：#393939；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：黑色；
位置：固定；
排名：0；
宽度：100%；
左：0px；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：22px 22px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#4CAF50；
}
#包装纸{
宽度：720px；
保证金：自动；
}
#幻灯片放映{
填充：15px 40px；
}
h1{
字体大小：40px；
利润率最高：35%；
左边缘：-27%；
字体：斜体；
字号：28px；
字体变体：小大写字母；
溢出：隐藏；
}
h1：之后{
背景颜色：灰色；
内容：“；
显示：内联块；
高度：1px；
位置：静态；
垂直对齐：中间对齐；
宽度：70%；
左：0.5em；
保证金权利：-50%；
}
#图像{
浮动：左；
保证金：0px 0px 10px-150px；}
}






HTML部分
手动幻灯片放映
导航在幻灯片中变小的原因是您需要使用z-index将导航设置到更高的层，这应该可以实现
在ul

ul {
   ...
   z-index: 5;
}

你尝试了什么？欢迎来到Stack Overflow！问题的全部内容必须在问题中，而不仅仅是链接。链接会腐烂，使得问题及其答案对未来的人们来说毫无用处，人们不应该非得离开网站去帮助你。提出一个问题，最好使用堆栈片段（工具栏按钮）使其可运行。更多：请提供一些代码，而不是网站的链接。ul上的z-index修复了幻灯片问题：）谢谢