Question

我是基金会的新手。这是我为演示制作的拇指列表

  <div class="row">
<div class="large-12 columns">
  <h1>Gallery</h1>
  <ul class="small-block-grid-4">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/1.jpg" alt=""></li>

  </ul>

</div>

现在拇指很好，但它有一些边缘或填充。每个拇指之间的差距。 如何使用css删除它 感谢。

Answer 1

定义一个css

   .imagelist li{
            Padding:0;
            margin:0;
}

并将css类“imagelist”添加到ul标记中，它会覆盖基础css样式。

    <div class="row">
    <div class="imagelist large-12 columns">
     <h1>Gallery</h1>
     <ul  class="imagelist small-block-grid-4">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/1.jpg" alt=""></li>
     </ul>
   </div>
   </div>

Answer 2

实际上，最好的方法是使用Foundation提供给你的变量。检查你的settings.scss，你会发现一些与块网格相关的变量。你正在寻找的那个是第166行：$ block-grid-default-spacing。在这里，您可以将其设置为您喜欢的任何内容。

消除Zurb Foundation 5中块状网格中Li的间隙

2 个答案: