🕵️ 👊🏾 🤷🏾 負のインデント-汎用性への道 👩🏿‍🤝‍👨🏾 🎚️ 👧🏼

同じインデントと共通コンテナを持つ一連のブロックで、最初または最後のブロックにインデントがないか、他のブロックと異なる場合によく遭遇します。しばらくの間、この「問題」を解決するために、ネガティブインデントを使用する手法を習得するまで、最初または最後のクラスのように「クランチ」を使用しました。

負のインデントを使用すると、幅広い可能性が広がり、レイアウトをより普遍的にすることができます。すべてを理解するために、ギャラリーのようなブロックで満たされた小さなコンテナを作成しましょう。

ブロック充填コンテナ

たとえば、私は最も困難な状況を選択しようとしました。この場合、最初の行の上部のインデントだけでなく、最初の列の左側のインデントも無効にし、divコンテナーのブロックを3列にきれいに収める必要があります。

HTML：

<div>
<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>
</ul>
</div>

CSS：

div {
border: 2px solid #CCC;
overflow: hidden;
width: 640px;
}
ul {
margin: -20px 0 0 -20px;
overflow: hidden;
padding: 0;
}
ul li {
background: #C06;
float: left;
height: 100px;
list-style: none;
margin: 20px 0 0 20px;
width: 200px;
}
*html ul {
width: 660px;
}
*html ul li {
display: inline;
}

問題は解決されたので、ここで主要なポイントに焦点を当てましょう。中心点は、ulタグの負のマージンプロパティ、およびdivタグの非表示値を持つoverflowプロパティです。彼らの助けを借りて、ulブロックをdivブロックに対して20pxだけ左上に移動し、オーバーフローの助けを借りて、不要なインデントを切り取ります。これら2つのプロパティはメソッドの本質です。

コンテナを超えるネガティブパディング

しかし、常に1つまたは3つも存在するため、これはulタグのオーバーフロープロパティとIE 6.0ブラウザーの2つの個別のプロパティです。最初のプロパティは、親ブロックのfloatプロパティの効果を中和するために使用されます。 IE 6.0では、IEが子ブロックに対して自分で計算できないため、ulブロックのwidthプロパティと、floatプロパティがブロックに適用されたときにインデントの2倍化を排除するdisplayプロパティを個別に使用しました。

提示された例はブラウザでテストされました：IE 6.0 +、Firefox 2.0、Opera 9.0、Safari 2.0+。繰り返しになりますが、この手法は普遍的であり、必要に応じてさまざまなバリエーションであらゆる場所に適用できます。実験して、経験を共有してください:)

例

負のインデント-汎用性への道

HTML：

CSS：

More articles: