CSSで枠線が消えてしまう場合の対処法

今回はCSSの境界線が消えた場合の対処法を紹介します。 CSSの境界線が消えた場合の注意点を実際に見てみましょう。

まず下の図を見てみましょう。いくつかの ナビゲーション 列でよく見られます。最も便利でエレガントな方法で、各行の最後の列の右の境界線が消えるようにする必要があります。 IE8 と互換性がある必要がない場合は、CSS3 に新しく追加された

セレクターを使用するのが間違いなく良い方法です。

// 使用伪类选择器，选择第 3n 个元素去掉边框
li:nth-child(3n){ 
　　border-right:none; 
　　}

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

しかし、これでは十分にエレガントではありません。 ここでちょっとしたトリックをご紹介します。それは、逆枠を追加し、負の

マージン

を追加することです。

まず、ul 構造が次のとおりであると仮定します。

<p> 
    </p>

          
• 测试
          
• 消失
          
• 边界线
          
• 右侧
          
• 边界线
          
• 消失
          
• 测试
      

 

図に示すように、各行に 3 つの li があり、各 li の幅が 100 ピクセルで、ul コンテナと ul コンテナの幅が両方とも に設定されていると仮定します。 300ピクセル。 最も重要なことは、各 li が右境界線ではなく左境界線を設定することです:

.ul-container, 
 
　　ul{ 
 
　　width:300px; 
 
　　} 
 
　　li{ 
 
　　float:left; 
 
　　width:99px; 
 
　　border-left:1px solid #999; 
 
　　}

次の結果が得られます:

次に、コンテナ ul-container を

overflow

: hidden に設定します。 、ul 1 ピクセル左に移動します

margin-left:-1px。

このように、ul の最初の列のすべての境界線は、左に 1 ピクセル移動されて overflow:hidden になったため消え、次の li の右境界線が左境界線のように見えます。これは単なるトリックです:

.ul-container{ 
 
　　overflow:hidden; 
 
　　} 
 
　　ul{ 
 
　　margin-left:-1px; 
 
　　}

効果図は最初の図に示されているとおりです:

このアプローチは、新しく追加された各 li が前の li 要素とは別の左ボーダーですが、視覚的には前の li 要素の右ボーダーのように見えます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

スクロールバースタイルの設定

CSS中央揃えレイアウトの概要

絶対配置された要素を水平方向および垂直方向に中央揃えにする3つの方法

以上がCSSで枠線が消えてしまう場合の対処法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。