如何删除内容和内容之间的导航？

Question

我正在写一个网站而且我遇到了问题。这是代码（滑块有效，但不在代码集上）：link

(Between nav and content a big indent) I do not need this indent

第一个问题：如何将导航拉伸到整个页面（宽度：100％无效）？ （目前，并非所有地方都被占用）

第二个问题：导航和内容之间存在缩进。如何删除它？

Answer 1

在fullpage上运行代码段以查看更改。变化：

i）nav ul添加了以下代码以使其灵活并使用flexbox将其拉伸到页面的整个宽度（浮动已被删除，因为使用flexbox时不再需要它们）：

display: flex;
align-items: stretch;
justify-content: space-between;
margin: 0;  //Changing this to 0 removes the indentation b/w nav & content

ii）nav li的变化是让它增长和缩小，具体取决于视口大小调整：

text-align: center;
flex: 1;

var slideNow = 1;
var slideCount = $('#slidewrapper').children().length;
var slideInterval = 3000;
var navBtnId = 0;
var translateWidth = 0;

$(document).ready(function() {
  var switchInterval = setInterval(nextSlide, slideInterval);

  $('#viewport').hover(function() {
    clearInterval(switchInterval);
  }, function() {
    switchInterval = setInterval(nextSlide, slideInterval);
  });

  $('#next-btn').click(function() {
    nextSlide();
  });

  $('#prev-btn').click(function() {
    prevSlide();
  });

  $('.slide-nav-btn').click(function() {
    navBtnId = $(this).index();

    if (navBtnId + 1 != slideNow) {
      translateWidth = -$('#viewport').width() * (navBtnId);
      $('#slidewrapper').css({
        'transform': 'translate(' + translateWidth + 'px, 0)',
        '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
        '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
      });
      slideNow = navBtnId + 1;
    }
  });
});


function nextSlide() {
  if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
    $('#slidewrapper').css('transform', 'translate(0, 0)');
    slideNow = 1;
  } else {
    translateWidth = -$('#viewport').width() * (slideNow);
    $('#slidewrapper').css({
      'transform': 'translate(' + translateWidth + 'px, 0)',
      '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
      '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
    });
    slideNow++;
  }
}

function prevSlide() {
  if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
    translateWidth = -$('#viewport').width() * (slideCount - 1);
    $('#slidewrapper').css({
      'transform': 'translate(' + translateWidth + 'px, 0)',
      '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
      '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
    });
    slideNow = slideCount;
  } else {
    translateWidth = -$('#viewport').width() * (slideNow - 2);
    $('#slidewrapper').css({
      'transform': 'translate(' + translateWidth + 'px, 0)',
      '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
      '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
    });
    slideNow--;
  }
}

/* This is a Header*/

body {
  width: 100%;
  margin: 0;
  padding: 0;
}


/*This is a navbar*/

#nav {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #2b3030;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

#nav li {
  text-align: center;
  flex: 1;
}

#nav li a {
  display: block;
  padding: 10px calc(100%/7);
  text-decoration: none;
  font-weight: bold;
  color: white;
}

#nav li a:hover {
  color: white;
  background-color: #12700c;
}


/*Content*/


/* This is a slider  */

#block-for-slider {
  width: 1280px;
  margin: 0 auto;
}

#viewport {
  width: 100%;
  display: table;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#slidewrapper {
  position: relative;
  width: calc(100% * 4);
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

#slidewrapper ul,
#slidewrapper li {
  margin: 0;
  padding: 0;
}

#slidewrapper li {
  width: calc(100%/4);
  list-style: none;
  display: inline;
  float: left;
}

.slide-img {
  width: 100%;
}

#prev-btn,
#next-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  top: calc(50% - 25px);
}

#prev-btn:hover,
#next-btn:hover {
  cursor: pointer;
}

#prev-btn {
  left: 20px;
}

#next-btn {
  right: 20px;
}

#nav-btns {
  position: absolute;
  width: 100%;
  bottom: 20px;
  padding: 0;
  margin: 0;
  text-align: center;
}

.slide-nav-btn {
  position: relative;
  display: inline-block;
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  margin: 3px;
}

.slide-nav-btn:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul id="nav">
    <li><a href="#">Lalala</a></li>
    <li><a href="#">Lalala</a></li>
    <li><a href="#">Lalala</a></li>
    <li><a href="#">Lalala</a></li>
    <li><a href="#">Lalala</a></li>
    <li><a href="#">Lalala</a></li>
    <li><a href="#">Lalala</a></li>
  </ul>
</div>
<div class="content">

  <div id="block-for-slider">
    <div id="viewport">
      <ul id="slidewrapper">
        <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"></li>
        <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"></li>
        <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"> </li>
        <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"></li>
      </ul>

      <div id="prev-next-btns">
        <div id="prev-btn"></div>
        <div id="next-btn"></div>
      </div>
      <ul id="nav-btns">
        <li class="slide-nav-btn"></li>
        <li class="slide-nav-btn"></li>
        <li class="slide-nav-btn"></li>
        <li class="slide-nav-btn"></li>
      </ul>
    </div>
  </div>
</div>