光滑的滑塊位置和寬度

Question

我是CSS的新手，正在嘗試在項目上使用Slick滑塊： http : //kenwheeler.github.io/slick/

我有一個div container ，它占頁面寬度的100％。然后，我有一個div container （包含滑塊），占了80％的寬度。

但是，我試圖將div定位在頁面的中央，而且我也看不到左按鈕。

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/q7eN9wYbbSjq13reLDdD?p=preview

真的為此苦苦掙扎

Answer 1

刪除此行

 margin-left: -3em;

在您的.grid-wrap類中

.grid-wrap {
  margin-left: -3em; //remove this line
  /* the same as your gutter */
  overflow: hidden;
  clear: both;
}

添加這個CSS

.your-class {
   padding-left: 2em; 
}

查看演示

Answer 2

試試這個CSS

   .grid-wrap { 
      clear: both;
    }

.container {

  width: 70%;
  margin: 0 auto;
}

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

.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;
}