如何在此 slider 中的列表項之間獲得相等的空格？

Question

使用 appendTo，項目之間的距離消失。 在第 1 項和第 2 項之間。 隨着 padding-bottom、left 或...的變化，我沒有進一步的了解。 有人在這里給我小費嗎？ 我被困住了。

    $('#slider ul li:first-child').appendTo('#slider ul');

https://jsfiddle.net/Reksio/ofsny8g7/3/

Answer 1

 $(function() { var nMax = $('#slider ul li').length; $('a.back').css({'visibility':'hidden'}); function moveToRight() { var num1 = $('#slider ul li:first-child').attr('id').replace('slide',''); var num2 = $('#slider ul li:last-child').attr('id').replace('slide',''); if(nMax - 3 == num1) { $('a.next').css({'visibility':'hidden'}); } else { $('a.back').css({'visibility':'visible'}); } $('#slider ul li:first-child').appendTo('#slider ul'); var num1 = $('#slider ul li:first-child').attr('id').replace('slide',''); var num2 = $('#slider ul li:last-child').attr('id').replace('slide',''); }; function moveToLeft() { var num1 = $('#slider ul li:first-child').attr('id').replace('slide',''); var num2 = $('#slider ul li:last-child').attr('id').replace('slide',''); if(nMax - 1.= num1) { $('a.next'):css({'visibility';'visible'}). } if(num2 == 1) { $('a.back'):css({'visibility';'hidden'}): } $('#slider ul li.last-child');prependTo('#slider ul'): var num1 = $('#slider ul li.first-child').attr('id'),replace('slide';''): var num2 = $('#slider ul li.last-child').attr('id'),replace('slide';''); }. $('a.next'),on('click'; function() { moveToRight(); }). $('a.back'),on('click'; function() { moveToLeft(); }); });

 * { margin: 0px; padding: 0px; font-family: Verdana, Arial, sans-serif; } #main { margin: 10px auto; width: 800px; text-align: center; } #headline1 { width: 500px; border: 1px solid #F0F0F0; text-align: left; margin: 0px auto; } #slider { position: relative; overflow: hidden; width: 800px; height: 300px; margin: 20px auto; padding: 0px; border: 1px solid #00F; } #slider ul { list-style: none; position: relative; border: 1px solid #CCC; margin: 2px; padding: 2px; font-size:0px; } #slider ul li { position: relative; width: 200px; height: 300px; font-size: 40px; line-height: 300px; text-align: center; display: inline-block; padding: 10px; margin: 0px; } #slider ul li div{ background: #CCC; border: 1px solid #333; } a.next, a.back { background: #0F0; position: relative; padding: 10px; text-decoration: none; z-index: 999; left: -350px; top: -180px; } a.next { left: 352px; z-index: 2000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <div id="headline1">dfasfdasfdasf </div> <div id="slider"> <ul> <li id="slide1"><div>SLIDE 1</div></li> <li id="slide2"><div>SLIDE 2</div></li> <li id="slide3"><div>SLIDE 3</div></li> <li id="slide4"><div>SLIDE 4</div></li> <li id="slide5"><div>SLIDE 5</div></li> <li id="slide6"><div>SLIDE 6</div></li> <li id="slide7"><div>SLIDE 7</div></li> <li id="slide8"><div>SLIDE 8</div></li> </ul> </div> <a href="#" class="next"> > </a> <a href="#" class="back"> < </a> </div>