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

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

您需要减少 block 网格 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;
}

您需要为您打算使用的所有 block 状网格添加所有不同的宽度和边距。