Heim >Web-Frontend >HTML-Tutorial >Wie entferne ich Leerzeichen zwischen Inline-Block-Elementen?
Wie entferne ich Leerzeichen zwischen Inline-Block-Elementen?
- PHPznach vorne
- 2023-09-22 22:25:021418Durchsuche
Wir können Leerzeichen zwischen Inline-Blockelementen problemlos entfernen. Bevor wir fortfahren, erstellen wir zunächst ein HTML-Dokument und fügen ein Inline-Blockelement mit Leerzeichen hinzu –
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Inline block elements</title>
<style>
li {
display: inline-block;
width: 150px;
font-size: 18px;
}
li:nth-child(1) {
background: green;
color: white;
}
li:nth-child(2) {
background: orange;
color: black;
}
li:nth-child(3) {
background: blue;
color: white;
}
li:nth-child(4) {
background: red;
color: black;
}
</style>
</head>
<body>
<h1>Free Tutorials</h1>
<p>We have the following tutorials right now:</p>
<ul>
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Automation</li>
</ul>
</body>
</html>
Sehen wir uns nun einige Beispiele für das Entfernen von Leerzeichen zwischen Inline-Blockelementen an -
Entfernen Sie Leerzeichen zwischen Inline-Blockelementen
Wir können Leerzeichen zwischen Inline-Blockelementen entfernen, indem wir ungeordnete Listenelemente in einer Zeile anordnen –
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Inline block elements</title>
<style>
li {
display: inline-block;
width: 150px;
font-size: 18px;
}
li:nth-child(1) {
background: green;
color: white;
}
li:nth-child(2) {
background: orange;
color: black;
}
li:nth-child(3) {
background: blue;
color: white;
}
li:nth-child(4) {
background: red;
color: black;
}
</style>
</head>
<body>
<h1>Free Tutorials</h1>
<p>We have the following tutorials right now:</p>
<ul>
<li>Java</li><li>Python</li><li>Machine Learning</li><li>Automation</li>
</ul>
</body>
</html>
Entfernen Sie Leerzeichen zwischen Inline-Blockelementen, indem Sie schließende Tags überspringen
Wir können Leerzeichen auch entfernen, indem wir Kategorie-Tags überspringen –
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Inline block elements</title>
<style>
li {
display: inline-block;
width: 150px;
font-size: 18px;
}
li:nth-child(1) {
background: green;
color: white;
}
li:nth-child(2) {
background: orange;
color: black;
}
li:nth-child(3) {
background: blue;
color: white;
}
li:nth-child(4) {
background: red;
color: black;
}
</style>
</head>
<body>
<h1>Free Tutorials</h1>
<p>We have the following tutorials right now:</p>
<ul>
<li>Java
<li>Python
<li>Machine Learning
<li>Automation
</ul>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie entferne ich Leerzeichen zwischen Inline-Block-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!