Question

我正在尝试移动元素块，例如＆＃34; Home＆＃34; ，＆＃34;新闻＆＃34;等到中间或在导航栏中将它放在我想要的位置。我尝试使用＆＃34;左＆＃34;在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>

我的网站：http://bcns2k16mt.net16.net/BCNS_16A_FT_160312/

Answer 1

导航在幻灯片放映之后的原因是因为您需要使用z-index将导航设置为更高层，这应该可以解决问题。

在z-index

上使用ul

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

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

1 个答案: