为什么左侧和顶部的无滑板有空白区域？

Question

我正在使用名为unslider的滑块。滑块工作正常，但有一件事让我烦恼很多。在第一张幻灯片中，左侧有一个空白区域。在其余的幻灯片中，顶部还有空间。

这是我的滑块： http://jsfiddle.net/132xmhbd/ 您也可以运行代码段！

.banner {
  position: relative;
  overflow: auto;
  width: 100vw;
  border: 1px solid black;
}
.banner li {
  list-style: none;
  width: 100vw;
  height: 200px;
}
.banner ul li {
  float: left;
  width: 100%;
}
.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}
.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}
.dots li.active {
  background: #fff;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<div class="banner">
  <ul>
    <li style="background: pink;">This is a slide.</li>
    <li style="background: lightgreen;">This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

<script>
  $(function() {
    $('.banner').unslider({
      dots: true,
      fluid: true,
    });
  });
</script>

Answer 1

您可以通过在<ul>和<li>

中将填充和边距设置为0来实现此目的

＆＃13;

＆＃13;

.banner {
  position: relative;
  overflow: auto;
  width: 100vw;
  border: 1px solid black;
}
.banner li {
  list-style: none;
  width: 100vw;
  height: 200px;
}
.banner ul , li {
  margin:0;
  padding:0;
}

.banner ul li {
  float: left;
  width: 100%;
}
.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}
.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}
.dots li.active {
  background: #fff;
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<div class="banner">
  <ul>
    <li style="background: pink;">This is a slide.</li>
    <li style="background: lightgreen;">This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

<script>
  $(function() {
    $('.banner').unslider({
      dots: true,
      fluid: true,
    });
  });
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想出了左边空格的一个解决方案，设置：

.banner ul {
    list-style:none;
    padding-left:0;
    margin: 0;
}

删除列表元素的缩进

Answer 3

从.banner ul

中删除边距和填充

.banner ul { padding: 0; margin: 0; }

Answer 4

这是一个有效的FIDDLE。 把这个CSS放在你的代码中：

.banner ul{
    margin:0px;
    padding:0px;
}

Answer 5

添加了.banner ul{padding: 0;margin: 0;}

.banner { 
	position: relative; 
	overflow: auto;
	width: 100vw;
	border:1px solid black;
 }
.banner li { 
	list-style: none;
	width: 100vw;
	height: 200px;
 }
.banner ul li { float: left; width: 100%;}
.banner ul { padding: 0; margin: 0; }

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}

.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}

.dots li.active {
  background: #fff;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<div class="banner">
      <ul>
        <li style="background: pink;">This is a slide.</li>
        <li style="background: lightgreen;">This is another slide.</li>
        <li>This is a final slide.</li>
     </ul>
  </div>

<script>
    $(function() {
        $('.banner').unslider({
            dots: true,
            fluid:true,
        });
    });
</script>