首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不带位置参数的zen网格项

不带位置参数的zen网格项
EN

Stack Overflow用户
提问于 2013-05-14 13:24:16
回答 1查看 495关注 0票数 1

我正在为一个新的drupal站点使用zen grids进行试验,我正在使用zen starter主题工作。假设我有一个5列的网格,其中有一个无序列表,其中有5个列表项。在我的scss文件中,我想说让每个<li>都有一列宽,第一个列表项没有左边界,最后一个列表项没有右边界。

我看过zen-grid-item和zen-grid-flow-item混合,但我还没能做到这一点。谁能给我举个简单的例子?下面是一些示例标记

代码语言:javascript
复制
<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 */
  }
}
EN

回答 1

Stack Overflow用户

发布于 2013-08-29 21:54:44

代码语言:javascript
复制
<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;
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16535719

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档