Wie man mit dem Verschwinden von Grenzlinien in CSS umgeht

Dieses Mal zeige ich Ihnen, wie Sie mit dem Verschwinden der CSS-Grenzlinie umgehen können. Was sind die Vorsichtsmaßnahmen für den Umgang mit dem Verschwinden der CSS-Grenzlinie? Schauen Sie mal rein.

Schauen wir uns zuerst das Bild unten an. Es ist häufig in einigen Navigationsspalten zu sehen. Es ist erforderlich, dass der rechte Rand der letzten Spalte in jeder Zeile verschwindet Ist es die bequemste und eleganteste Implementierung in allen Browsern? > Selektor ist zweifellos ein guter Weg.

Wenn die Anzahl definitiv klein ist, fügen Sie einfach eine bestimmte Klasse direkt zu dem Element hinzu, dessen rechter Rand entfernt werden muss, und das war's. Alternativ ist die Verwendung einer Tabelle etwas umständlicher, aber auch machbar.

Aber das ist nicht elegant genug.

Ein kleiner Trick besteht darin, einen umgekehrten Rand und einen negativen Rand hinzuzufügen.

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

Nehmen Sie zunächst an, dass unsere UL-Struktur wie folgt ist:

Angenommen, wie in der Abbildung gezeigt, sind in jeder Zeile 3 Lis angeordnet, jedes Li ist 100 Pixel breit, unser ul und ul- Die Containerbreite ist auf 300 Pixel eingestellt.

Das Wichtigste ist, dass jedes Li einen linken Rand anstelle eines rechten Randes festlegt:

Wir erhalten folgende Ergebnisse:

<p class="ul-container"> 
    <ul> 
        <li>测试</li> 
        <li>消失</li> 
        <li>边界线</li> 
        <li>右侧</li> 
        <li>边界线</li> 
        <li>消失</li> 
        <li>测试</li> 
    </ul> 
</p>

Als nächstes setzen wir den Container ul-container auf

overflow

:hidden und verschieben den ul um einen Pixel nach links

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

margin-left

:-1px.

Auf diese Weise verschwinden alle Ränder in der ersten Spalte von ul, weil sie um ein Pixel nach links verschoben werden und überlaufen: versteckt, wodurch der rechte Rand des nächsten li wie der linke Rand aussieht, was ist eigentlich nur ein Trick. :

Das Wirkungsdiagramm ist wie im ersten Diagramm dargestellt:

Dieser Ansatz kann an alle Situationen angepasst werden mit unterschiedlicher Anzahl von li und unterschiedlicher Anzahl von Zeilen, da jedes neu hinzugefügte li einen vom vorherigen li-Element getrennten linken Rand erzeugt, optisch jedoch wie der rechte Rand des vorherigen li-Elements aussieht.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

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

Empfohlene Lektüre:

Stil der Bildlaufleiste festlegen

CSS-Zusammenfassung des zentrierten LayoutsDrei Möglichkeiten, absolut positionierte Elemente horizontal und vertikal zu zentrieren

Das obige ist der detaillierte Inhalt vonWie man mit dem Verschwinden von Grenzlinien in CSS umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!