Question

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

// doctors.html.erb
<%= link_to "Ekle", patient_add_doctor_path(id: @patient.id), method: :post %>

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

填充物不会消失

2 个答案: