禅网格项

Question

我与zen grids经历过了一个新的Drupal站点我正在使用禅启动主题..让说，我有一个5柱网与具有5列表项的无序列表在里面。在我的SCSS文件，我想说的是使每一个<li>立柱偏出与第一个列表项没有左缘和最后一个列表项无权利润。

我已经看过了禅宗并网项目和禅宗网流项目的混入，但我一直没能做到这一点。任何人都能给我一个快速的例子吗？这里是一些样本标记

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
    <li>Fourth</li> 
    <li>Fifth</li> 
</ul> 

ul { 
    $zen-column-count: 5; 
    $zen-gutter-width: 30px; 
    @include zen-grid-container; 
    li { 
    /* Not sure what to put here to make each <li> 1 column wide */ 
    } 
} 

Answer 1

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
</ul> 

ul { 
    $zen-column-count: 5; 
    $zen-gutter-width: 0; 
    @include zen-grid-container; 

    background: #eee; 

    width: 70%; 
    margin: 0 auto; 
    li { 
    @include zen-grid-flow-item(1, 5); 
    @include zen-float(left); 
    height: 100px; 
    border: 1px solid #fff; 
    } 
}