光滑的滑块位置和宽度 [英] Slick slider positioning and width

问题描述

我是CSS的新手，正在尝试在项目上使用Slick滑块: http://kenwheeler.github. io/slick/

I am new to CSS and trying to use Slick slider on a project: http://kenwheeler.github.io/slick/

我有一个div container，它占据了页面宽度的100％.然后，我里面有一个div(包含滑块)，它占了页面宽度的80％.

I have a div container which occupies 100% of the pages width.. I then have a div inside that (that contains the slider) which occupies 80% of the width.

但是，我试图将div放置在页面中心，而且我也看不到左按钮.

However, i am trying to get the div to be positioned in the center of the page and also i am unable to see the left button.

HTML:

<div class="container">
    <div class="grid-wrap">
      <div class="grid-col one-eighth">
        <div class="your-class">
          <div>test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1</div>
          <div>test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2</div>
          <div>test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3</div>
          <div>test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4</div>
        </div>
      </div>
    </div>
  </div>

CSS:

.container {
  width: 100%;
  /* margin-left: 40px; */
}
.clearfix: before, .clearfix: after, .container: before, .container: after {
  content: " ";
  display: table;
}
.clearfix: after, .container: after {
  clear: both;
}
.container {
  margin-left: auto;
  margin-right: auto;
}
.grid-wrap {
  margin-left: -3em;
  /* the same as your gutter */
  overflow: hidden;
  clear: both;
}
.grid-col {
  float: left;
  padding-left: 3em;
  /* this is your gutter between columns */
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  position: relative;
  min-height: 100%;
}
body {
  margin: 0 0 150px;
}   
.one-eighth {
  width: 80%;
}

这是一个问题的演示者: http://plnkr.co/edit/q7eN9wYbbSjq13reLDdDD ?p =预览

Here's a plunker demo'ing the problem: http://plnkr.co/edit/q7eN9wYbbSjq13reLDdD?p=preview

真的为此苦苦挣扎

推荐答案

尝试此CSS

   .grid-wrap { 
      clear: both;
    }

.container {

  width: 70%;
  margin: 0 auto;
}

如果.container将包含更多元素，您也可以使用此

you can also use this if .container will have some more elements

.grid-wrap {
  /* margin-left: -3em; */
  /* overflow: hidden; */
  clear: both;
  width: 70%;
  margin: 0 auto;
}

更新删除padding-left: 3em;

.grid-col {
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

这篇关于光滑的滑块位置和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！