Maison > Article > interface Web > Comment éviter les sauts de ligne lors de l'utilisation de balises ?
Comment éviter les sauts de ligne lors de l'utilisation de balises ?
- WBOYavant
- 2023-09-02 22:05:06647parcourir
Lors de l'utilisation de balises, les navigateurs placent généralement les éléments dans le conteneur sur la ligne suivante. Par exemple, un programmeur doit placer le titre dans une ligne pour créer un composant de navigation. Nous pouvons utiliser les propriétés inline, inline-block, flex-box, etc. pour éviter de nouvelles lignes dans les étiquettes.
Cet article expliquera comment éviter les sauts de ligne avec les étiquettes via les attributs en ligne, les attributs flex-box, etc.
Utiliser les attributs en ligne
Un moyen populaire d'éviter le retour à la ligne des étiquettes consiste à utiliser l'attribut inline. Cette propriété force la nouvelle ligne à rester la même que la ligne précédente.
Exemple
<!DOCTYPE html>
<html lang="en">
<style>
.first-container{
display: inline;
padding:2px;
padding:10px;
border: 2px solid orange;
}
.second-container{
display: inline;
padding: 10px;
border: 2px solid purple;
}
body{
padding:2vw;
}
</style>
<body>
<div class="first-container">
This is the first paragraph.
</div>
<div class="second-container">
This is the second paragraph.
</div>
</body>
</html>
Instructions
Le code HTML crée une page Web simple contenant deux conteneurs "premier conteneur" et "second conteneur". Le remplissage de l'élément body représente 2 % de la largeur de la fenêtre.
Le "premier conteneur" a la valeur d'affichage "inline" avec une bordure orange et un remplissage de 2 et 10 pixels. Il affiche le texte "Ceci est le premier paragraphe". Le « deuxième conteneur » a une valeur d'affichage « en ligne », avec une bordure violette et 10 pixels de remplissage. Il affiche le texte « Ceci est le deuxième paragraphe. » Les conteneurs sont affichés côte à côte et séparés par un rembourrage du corps.
Utilisez l'attribut inline-block
Cette méthode est similaire à la méthode précédente, mais différente.
La différence entre l'utilisation du bloc en ligne et du bloc en ligne est la suivante -
Les éléments "Inline" sont placés en ligne avec le texte et n'occupent que la largeur requise. Ils ne créent pas de nouveau contexte de formatage de bloc et ne commencent pas non plus sur une nouvelle ligne, ils ne peuvent donc pas définir la largeur, la hauteur ou les marges. Des exemples d'éléments en ligne incluent la balise « span » et la balise « a ».
Les éléments "inline-block" sont similaires aux éléments "inline", mais ils peuvent définir la largeur, la hauteur et les marges. Ils créent également un nouveau contexte de formatage de bloc, ce qui signifie qu'ils peuvent définir le remplissage, les bordures et les couleurs d'arrière-plan. Cependant, ils seront toujours alignés sur le texte et ne commenceront pas sur une nouvelle ligne. Des exemples d'éléments de bloc en ligne incluent des images avec des dimensions et des boutons définis.
Exemple
<!DOCTYPE html>
<html lang="en">
<style>
.first-container{
display: inline-block;
padding:3px;
padding:15px;
border: 3px solid rgb(0, 47, 255);
}
.second-container{
display: inline-block;
padding: 15px;
border: 3px solid rgb(92, 24, 42);
}
body{
padding:2vw;
}
</style>
<body>
<div class="first-container">
This is the first paragraph.
</div>
<div class="second-container">
This is the second paragraph.
</div>
</body>
</html>
Utilisez flexbox
Une méthode très populaire consiste à utiliser Flexbox et ses propriétés liées aux balises pour éviter les sauts de ligne.
Exemple
<!DOCTYPE html>
<html lang="en">
<style>
.first-container {
padding: 3px;
padding: 15px;
border: 3px solid rgb(13, 108, 75);
}
.second-container {
padding: 15px;
border: 3px solid rgb(214, 59, 100);
}
.third-container {
padding: 15px;
border: 3px solid rgb(59, 59, 214);
}
body {
padding: 2vw;
}
.container {
display: flex;
flex-direction: row;
}
</style>
<body>
<div class="container">
<div class="first-container">This is the first element.</div>
<div class="second-container">This is the second element.</div>
<div class="third-container">This is the third element.</div>
</div>
</body>
</html>
Instructions
Ce code HTML crée une page Web simple avec trois conteneurs, chacun avec une classe différente. Le remplissage de l'élément body est défini sur 2 % de la largeur de la fenêtre. Les éléments du premier conteneur, du deuxième conteneur et du troisième conteneur ont des couleurs de remplissage et de bordure différentes.
Les conteneurs sont placés à l'intérieur d'un conteneur parent avec une classe "conteneur" qui a display: flex et flex-direction: row styles. Cela définit l'élément conteneur sur un conteneur Flex et affiche les éléments enfants en ligne, avec leurs propres styles et remplissage.
Conclusion
Cet article nous apprend à utiliser les balises pour éviter les sauts de ligne. Nous pouvons utiliser les attributs inline, inline block, flexbox, etc. pour éviter les sauts de ligne. Les programmeurs utilisent toutes ces méthodes de la même manière.
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!