Comment empêcher le div de bloc en ligne de s'enrouler ?-tutoriel CSS-php.cn

Comment empêcher le div de bloc en ligne de s'enrouler ?

PHPz

Libérer： 2023-09-03 20:29:06

avant

1035 Les gens l'ont consulté

如何防止inline-block div换行？

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;
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!