Maison > Article > interface Web > Comment supprimer les espaces entre les éléments de bloc en ligne ?
Comment supprimer les espaces entre les éléments de bloc en ligne ?
- PHPzavant
- 2023-09-22 22:25:021365parcourir
Nous pouvons facilement supprimer les espaces entre les éléments de bloc en ligne. Avant de continuer, créons d'abord un document HTML et ajoutons un élément de bloc en ligne avec des espaces -
Exemple
<!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>
Voyons maintenant quelques exemples de suppression d'espaces entre les éléments de bloc en ligne -
Supprimer les espaces entre les éléments de bloc en ligne
Nous pouvons supprimer les espaces entre les éléments de bloc en ligne en organisant les éléments de liste non ordonnés sur une seule ligne -
Exemple
<!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>
Supprimez les espaces entre les éléments de bloc en ligne en ignorant les balises de fermeture
Nous pouvons également supprimer des espaces en ignorant les balises de catégorie -
Exemple
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!