Maison > Article > interface Web > Comment empêcher le div de bloc en ligne de s'enrouler ?
Comment empêcher le div de bloc en ligne de s'enrouler ?
- PHPzavant
- 2023-09-03 20:29:06938parcourir
En CSS, l'attribut 'display' est utilisé pour définir l'affichage des éléments enfants. Lorsque nous définissons la valeur "inline-block" pour la propriété d'affichage, tous les éléments enfants sont affichés côte à côte. De plus, il crée automatiquement un design réactif, comme s'il ne trouvait pas suffisamment d'espace, il enveloppe automatiquement les éléments enfants.
Parfois, nous devons arrêter d'encapsuler les éléments enfants pour gérer l'espace Web. Dans ce cas, nous pouvons gérer la propriété CSS "white-space" pour éviter d'envelopper les éléments enfants.
Grammaire
Les utilisateurs peuvent suivre la syntaxe suivante et utiliser la propriété CSS « espace blanc » pour empêcher le retour à la ligne des divs de bloc en ligne.
CSS_selector {
white-space: nowrap;
}
Dans la syntaxe ci-dessus, CSS_selector est l'élément parent de tous les éléments enfants que nous définissons "inline-block" pour afficher.
Passons en revue l'exemple suivant pour comprendre comment empêcher le retour à la ligne des éléments de bloc en ligne.
Exemple 1
Dans l'exemple ci-dessous, nous avons créé un élément div parent contenant le nom de la classe "conteneur". Après cela, nous avons ajouté trois éléments enfants dans le conteneur parent, chacun contenant le nom de classe "inline-block-div".
En CSS, nous utilisons la propriété CSS « white-space : no-wrap » pour le conteneur parent et « display : inline-block » pour tous les éléments enfants. De plus, nous utilisons d'autres propriétés CSS pour styliser l'élément div.
Dans la sortie, l'utilisateur peut essayer de réduire la taille de la fenêtre du navigateur et observer que l'élément div de bloc en ligne ne revient pas à la ligne ou ne passe pas à la ligne suivante.
<html>
<head>
<style>
.container {
white-space: nowrap;
}
.inline-block-div {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
</head>
<body>
<h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
<div class = "container">
<div class = "inline-block-div"> Div 1 </div>
<div class = "inline-block-div"> Div 2 </div>
<div class = "inline-block-div"> Div 3 </div>
</div>
</body>
</html>
Exemple 2
Dans l'exemple ci-dessous, nous avons ajouté plusieurs tableaux contenant des données différentes. Le premier tableau contient des données scolaires et le deuxième tableau contient des données AC.
Nous définissons l'affichage des deux tableaux égal au bloc en ligne pour les afficher côte à côte sur la page Web. De plus, nous utilisons l'attribut "white-space" avec l'élément div "container".
Dans la sortie, nous pouvons observer les deux tables côte à côte et si nous réduisons la taille de la fenêtre, la table ne passe pas à la ligne suivante car nous empêchons les deux éléments de la table de s'enrouler.
<html>
<head>
<style>
.container {white-space: nowrap;}
.table {white-space: nowrap; display: inline-block; vertical-align: top; margin: 10px; border: 1px solid black;}
th, td {padding: 10px 40px; border: 1px solid black;}
</style>
</head>
<body>
<h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
<div class = "container">
<table class = "container table">
<tr><th> school Name </th> <th> Total Students </th> </tr>
<tr><td> ABC School </td> <td> 100 </td></tr>
</table>
<table class = "container table">
<tr><th> AC brand </th> <th> color </th><th> Price </th></tr>
<tr><td> LG </td> <td> White </td> <td> 10000 </td> </tr>
</table>
</div>
</body>
</html>
Exemple 3
Dans l'exemple ci-dessous, nous montrons comment empêcher un élément div de bloc en ligne de s'enrouler de manière conditionnelle. Si nous devons empêcher un élément div de bloc en ligne de s'enrouler dans des conditions spécifiques, nous pouvons utiliser JavaScript.
En JavaScript, nous accédons à tous les éléments div et parcourons tous les éléments div à l'aide de la méthode forEach(). Nous utilisons la propriété "whitespace" de l'objet style pour empêcher tous les divs de bloc en ligne d'être enveloppés à l'aide de JavaScript.
<html>
<head>
<style>
.child {width: 300px; background-color: blue; height: 200px; display: inline-block; margin: 10px; color: white; font-size: 30px;}
</style>
</head>
<body>
<h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third </div>
<div class = "child"> Fourth </div>
</div>
<script>
let divs = document.querySelectorAll('div');
let divsArray = Array.from(divs);
// add white-space: nowrap to all div
divsArray.forEach(div => {
div.style.whiteSpace = 'nowrap';
});
</script>
</body>
</html>
L'utilisateur a appris à empêcher le retour à la ligne des éléments div de bloc en ligne. Nous utilisons la propriété CSS "white-space" pour empêcher l'élément div de s'enrouler. Cependant, empêcher l'habillage des éléments div de bloc en ligne n'est pas une bonne pratique car cela enlève la réactivité de la page Web, mais dans certains cas spécifiques, nous pouvons empêcher cela si nous ne voulons pas que l'élément div se développe verticalement.
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!