1

zen スターター テーマを使用して取り組んでいる新しい drupal サイトのzen グリッドを試しています。<li>私のscssファイルでは、最初のリスト項目に左マージンがなく、最後のリスト項目に右マージンがないように、それぞれ1列幅を広くしたいと思います。

zen-grid-item と zen-grid-flow-item mixin を見てきましたが、これを達成できませんでした。簡単な例を教えてくれる人はいますか? ここにいくつかのサンプルマークアップがあります

<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 */
  }
}
4

1 に答える 1

0 
<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;
  }
}
于 2013-08-29T13:54:43.583 に答える