Heim >Web-Frontend >CSS-Tutorial >So richten Sie CSS LI horizontal und zentriert aus
Css li horizontale Mittelausrichtungsmethode: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann das Li-Tag, um schließlich die horizontale Mittelausrichtung durch Attribute wie „Überlauf: versteckt; Rand: 100 Pixel automatisch“ zu erreichen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer.
CSS-Methode zum Erzielen eines horizontalen Zentrierungseffekts von mehrspaltigen Li-Elementen
Teilen Sie ein Codebeispiel, das den horizontalen Zentrierungseffekt von mehrspaltigen Li-Elementen erzielt.
Die horizontale Zentrierung hier ist eigentlich der Effekt der gleichmäßigen Verteilung der Li-Elemente.
Das Codebeispiel lautet wie folgt:
<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 1180px;
height: auto;
margin: 100px auto;
border: 1px solid #f00;
overflow: hidden;
}
.main ul {
width: 1120px;
list-style: none;
margin: 0 auto;
}
.main ul li {
width: 100px;
height: 100px;
margin-right: 20px;
margin: 20px;
background: #f00;
float: left;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>Rendering:
Der obige Code erfüllt unsere Anforderungen. Hier finden Sie eine kurze Einführung in sein Implementierungsprinzip.
Setzen Sie die Breite des ul-Elements gleich der Breite des li-Elements plus dem Wert des Randes. Nehmen Sie an, dass dieser Wert durch w dargestellt wird. Die Breite des übergeordneten Elements von
ul beträgt w-margin-right (20 Pixel), und dieses übergeordnete Element verfügt über das Attribut overflow:hidden, sodass die überschüssigen Ränder ausgeblendet werden.
Empfohlen: „CSS-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo richten Sie CSS LI horizontal und zentriert aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!