Question

我有一个项目列表，每行4个，每个项目都是一个带有文本的灰色矩形。问题：这些物品相互接触，我想要它们之间的空间。显然一些SASS变量可以改变，但听起来很复杂，我无法做任何复杂的事情来实现如此元素化的东西。我的问题有一些简单的解决方案吗？

标记：

<div class='row'>
    <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"> 
        <li id='home_li_computing'>text1</li> 
        <li id='home_li_field'>text2</li> 
        <li id='home_li_thinking'>text3</li> 
        <li id='home_li_guide'>text4</li> 
    </ul>
</div>

CSS：

li {
    border: 1px solid #ddd;
    background-color: #eee;
}

Answer 1

您需要减小块网格li项目的宽度，然后添加边距以占用额外的宽度。

这是一个简单的css解决方案：

.large-block-grid-4 > li {
    width: 20%;
    margin: 2.5%;
}

.medium-block-grid-3 > li {
    width: 28.33333%;
    margin: 2.5%;
}

li {
border: 1px solid #ddd;
background-color: #eee;
}

您需要为要使用的所有块网格添加所有各种宽度和边距。

Answer 2

li是将物品放在一边的东西，应该单独放置。简单的解决方案是在每个li中放置一个容器，如下所示：

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"> 
  <li id="home_li_computing"><div class="list-container">text1</div></li> 
  <li id="home_li_field"><div class="list-container">text2</div></li> 
  <li id="home_li_thinking"><div class="list-container">text3</div></li> 
  <li id="home_li_guide"><div class="list-container">text4</div></li> 
</ul>

你的css看起来一样，只是针对容器：

.list-container {
  border: 1px solid #ddd;
  background-color: #eee;
}

我不建议调整响应式框架的保证金百分比，因为这只是问题。如果你想调整间距，总是使用填充，因为它会占用内部而不是增加总宽度。

实施例。宽度为33％的5px边距为33％+ 10px。 5px的填充到33％的宽度仍然是33％。只要没有关闭边框，这就可以工作。

如何使用Foundation 5在列表项之间添加边距？

2 个答案: