2

ナビゲーションの列を互いに突き合わせたいことを除いて、完全に機能するグリッドがあります。これはデスクトップ上の 24 列のマジック グリッドであり、これらの各ナビゲーション アイテムは 4/24 です。負のマージンを試してみると、ナビゲーション バーの幅全体にまたがらず、左にスライドして穴が残ります (最後の項目はオメガです)。これは列で行うことができますか、それともナビゲーションバーなしで行う必要がありますか? このスクリーンショットでは、わかりやすいようにすべてグレーにしています。

ここに画像の説明を入力

4

2 に答える 2

3

側溝が必要ない場合は、スージーの助けは必要ありません。計算は簡単です。

.nav-item {
  float: left;
  width: percentage(4/24);
}

それだけですが、お気づきのように、一部のブラウザでは、サブピクセルの丸めのために余分なスペースが残っています。サブピクセルの丸めに対する簡単な解決策は、その周りの設計を学ぶことを除いてはありません。スージーは、端よりも内側のスペースを隠す方が簡単なので、最後の列を右に浮かせます。

あなたの他のオプションは少しハッキーであり、あなたを近づけます（しかし完全ではありません）。すべての列を左揃えで引くことにより、丸め誤差を合計せずに、列を元の位置に戻すことができます。そうすれば、1pxを超えるギャップが生じることはありません。

.nav-item {
  float: left;
  width: percentage(4/24);

  // pull things flush left
  margin-right: -100%;

  // push things back into place
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); }
  }
}

もちろん、古いブラウザをサポートしている場合は、：nth-​​childの代わりにクラスを使用できます。レスポンシブデザインを行う場合は、これが最善の方法です。レスポンシブデザインでサブピクセルの丸めを完全に回避する方法はありません。その周りのデザインを学ぶことを強くお勧めします。

于 2012-10-20T20:34:33.410 に答える