为什么JS中轮播图中，我写关于按钮样式时，按钮不会显示？

Question

    <div class="way" id="way">

    <div class="banner" id="banner">

    <a href="">

    <div class="banner-slide slide1 slide-action">

    </a>

    <a href="">

    <div class="banner-slide slide2">

    </a>

    <a href="">

    <div class="banner-slide slide3">

    </a>

    <a href="">

    <div class="banner-slide slide4">

    </a>

    </div>

    <a href="javascript:(0)" class="button prev" id="prev"></a>

    <a href="javascript:(0)" class="button next" id="next"></a>

    </div>

</body>

</html>

CSS：

.way{

width:1200px;

height: 460px;

margin:0 auto;

overflow: hidden;

position: relative;

}

.banner{

width:1200px;

height:460px;

overflow: hidden;

position: relative;

}

.banner-slide{

width:1200px;

height:460px;

position: absolute;

background-repeat: no-repeat;

display:none;

}

.slide-action{display: block;}

.slide1{background-image: url("../img/ban1.png");}

.slide2{background-image: url("../img/ban2.jpg");}

.slide3{background-image: url("../img/ban3.png");}

.slide4{background-image: url("../img/ban4.jpeg");}

.button{

    position: absolute;

    top: 50%;

    left: 0px;

    height: 80px;

    width: 40px;

    margin-top:-40px;

    background:url(../img/arrow.png) no-repeat center center;

}

.button:hover{

background-color: #333;

opacity:0.8;

filter: alpha(opacity=80);

}

.prev{transform: rotate(180deg);}

.next{

left:auto;

right: 0;

}

Answer 1

<a href="">     <div class="banner-slide slide1 slide-action"></div> </a> <a href="">     <div class="banner-slide slide2"></div> </a> <a href="">     <div class="banner-slide slide3"></div> </a> <a href="">     <div class="banner-slide slide4"></div> </a>你的DIV都没的结束呀，就是少了 </div>。你不结束，浏览器就会按它猜的帮你结束，可惜它猜错了。自己打开浏览器控制台，看看它帮你生成的结构是不是你想的。