Question

我是CSS新手并尝试在项目中使用Slick滑块：http://kenwheeler.github.io/slick/

我有div container占据了100％的页面宽度..然后我的内部有一个div（包含滑块）占据了宽度的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; 
}

<强> SEE DEMO

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

光滑的滑块定位和宽度

2 个答案: