CSSの面白い話題を語ろう(7) – 枠線が消える問題

このシリーズを始めて、いくつかの興味深い CSS 質問について話してください。質問の種類は多岐にわたり、想像力豊かです。これは、問題を解決するためのアイデアを広げるだけでなく、見落とされがちな CSS の詳細も含まれます。 。

問題を解決する際に互換性は考慮されません。質問は自由で、思いついたことを何でも言ってください。問題を解決する際に馴染みのない CSS プロパティがある場合は、できるだけ早く学習してください。

更新し続けて、更新し続けて、更新し続けて、重要なことは3回言います。

興味深い CSS トピックについて話しましょう (1) -- 左側の垂直バーを実装する方法

CSSの面白い話題について話しましょう(2) – ストライプボーダーの実装からボックスモデルについての話

興味深い CSS トピックについて話しましょう (3) – スタック順序とスタック コンテキストについてどれくらい知っていますか

いくつかの興味深い CSS トピックについて話しましょう (4) – リフレクションから始めて、CSS の継承継承について話しましょう

いくつかの興味深い CSS トピックについて話しましょう (5) - 1 行を中央揃え、2 行を中央揃え、3 行以上を省略する

いくつかの興味深い CSS の問題について話しましょう (6) – 完全に互換性のある複数列の均一レイアウトの問題

すべてのトピックは私の Github にまとめられています。

7. 消滅する境界問題

一部のナビゲーション バーでよく見られる下の図を見てください。各行の最後の列の右側の境界線をすべてのブラウザーで最も便利かつエレガントに実装するにはどうすればよいでしょうか。

互換性が必要ない場合 IE8- は、CSS3 で追加された新しいセレクターを使用することが間違いなく良い方法です。

リーリー

もちろん、数が明らかにそれほど多くない場合は、右側の境界線を削除する必要がある要素に特定のクラスを直接追加するだけです。あるいは、テーブルを使用することも少し面倒ですが、それも実現できます。

しかし、これでは十分にエレガントではありません。

ここにちょっとしたトリックがあります。それは、逆枠を追加し、マイナス記号を追加することです。 margin

まず、 構造が次のようになっていると仮定します。 ul

リーリー

写真のように、各列にが3つ並んでいるとします。 li ，每个 li 宽 100px ，我们的 ul 和 ul-container 宽度都设为 300px

最も重要なことは、各 が右境界線ではなく左境界線を設定することです。 li

リーリー

次の結果が得られます:

次に、コンテナ ul-container を overflow:hidden に設定し、 を 1 ピクセル margin-left:-1px だけ左に移動します。 ul-container 设置为 overflow:hidden ，并且将 ul 左移一个像素 margin-left:-1px

このように、 の最初の列の境界線はすべて、左に 1 ピクセル移動して overflow:hidden により消え、次の ul 中第一列的所有边框都因为左移了一像素并且被 overflow:hidden 而消失了，造成了下一个 li の右の境界線は次のようになります。左の境界線、実際には単なる隠蔽です:

リーリー

レンダリングは最初に示したとおりです:

デモポケミー

このアプローチは、さまざまな li 个数不同行数的所有情况，因为每个新添加的 li ，都会生成一个左边框与上一个 li 元素分开，只是在视觉上看上去像是上一个 li 要素の正しい境界線に適応できます。

より多くの交流を得るために、すべてのトピックは私の Github にまとめられ、ブログに投稿されます。

この記事はこれで終わりです。まだ質問や提案がある場合は、オリジナルの記事ですので、記事に何か間違っている点があれば、お知らせください。私にお知らせください。