填充不会消失

Question

我正在从一个无序列表中构建这个链接网格，出于某种原因，容器 div 的左侧有一些填充，我似乎无法消除这些填充。我的目标是让无序列表以容器 div 为中心，两边都没有额外的填充。这是我的代码：

.channels-container {
  max-width: 100rem;
  margin: 10rem auto;
  background: lightblue;
  display: block;
}
.channels-container ul {
  list-style: none;
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
}
.channels-container a {} .channels-container li {
  background: lightgreen;
  margin-bottom: 1rem;
  padding: 2rem;
  text-align: center;
}

<div class="channels-container">
  <ul>
    <a href="/category/funny">
      <li>Funny</li>
    </a>
    <a href="/category/gaming">
      <li>Gaming</li>
    </a>
    <a href="/category/gifs">
      <li>GIFs</li>
    </a>
    <a href="/category/movies">
      <li>Movies</li>
    </a>
    <a href="/category/music">
      <li>Music</li>
    </a>
    <a href="/category/news">
      <li>News</li>
    </a>
    <a href="/category/pics">
      <li>Pics</li>
    </a>
    <a href="/category/politics">
      <li>Politics</li>
    </a>
    <a href="/category/random">
      <li>Random</li>
    </a>
    <a href="/category/science">
      <li>Science</li>
    </a>
    <a href="/category/sports">
      <li>Sports</li>
    </a>
    <a href="/category/style">
      <li>Style</li>
    </a>
    <a href="/category=/technology">
      <li>Technology</li>
    </a>
    <a href="/category/videos">
      <li>Videos</li>
    </a>
  </ul>
</div>

Answer 1

浏览器有默认样式。您需要覆盖这些样式。添加以下样式

html, body {
    margin: 0;
    padding: 0;
}

供参考 - http://plnkr.co/edit/Eq80pPix4OZg8cnSjq2g?p=preview

Answer 2

填充不在 div 中，它在您的列表中。

.channels-container {
  max-width: 100rem;
  margin: 10rem auto;
  background: lightblue;
  display: block;
}
.channels-container ul {
  list-style: none;
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
  padding:0em;
}
.channels-container a {} .channels-container li {
  background: lightgreen;
  margin-bottom: 1rem;
  padding: 2rem;
  text-align: center;
}

<div class="channels-container">
  <ul>
    <a href="/category/funny">
      <li>Funny</li>
    </a>
    <a href="/category/gaming">
      <li>Gaming</li>
    </a>
    <a href="/category/gifs">
      <li>GIFs</li>
    </a>
    <a href="/category/movies">
      <li>Movies</li>
    </a>
    <a href="/category/music">
      <li>Music</li>
    </a>
    <a href="/category/news">
      <li>News</li>
    </a>
    <a href="/category/pics">
      <li>Pics</li>
    </a>
    <a href="/category/politics">
      <li>Politics</li>
    </a>
    <a href="/category/random">
      <li>Random</li>
    </a>
    <a href="/category/science">
      <li>Science</li>
    </a>
    <a href="/category/sports">
      <li>Sports</li>
    </a>
    <a href="/category/style">
      <li>Style</li>
    </a>
    <a href="/category=/technology">
      <li>Technology</li>
    </a>
    <a href="/category/videos">
      <li>Videos</li>
    </a>
  </ul>
</div>

填充不会消失

Padding won't go away

html

css

html-lists

padding