Pourquoi mes éléments de bloc en ligne de 50 % de largeur passent-ils à la ligne suivante ?

Les éléments de bloc en ligne passent à la deuxième ligne : comprendre la largeur et l'espace blanc

Lorsque vous essayez de créer deux éléments de bloc en ligne avec une largeur de 50 %, il peut être frustrant de rencontrer un problème où le deuxième élément passe à la ligne suivante. Ce comportement, cependant, n'est pas le résultat de la propriété inline-block mais plutôt une conséquence de la gestion des espaces blancs.

La propriété display:inline-block permet aux éléments de se comporter comme des éléments en ligne (affichés sur le même ligne), tout en ayant également une largeur et une hauteur définies. Cependant, contrairement aux éléments en ligne, les éléments de bloc en ligne prennent en compte les caractères d'espacement dans leur calcul de largeur.

Dans le cas de deux éléments de bloc en ligne d'une largeur totale de 99 %, par exemple 50 % et 49 % , la mesure de la largeur inclut l'espace blanc entre eux. En conséquence, les éléments s'ajustent dans la largeur spécifiée et apparaissent côte à côte.

D'autre part, lorsque la largeur totale des éléments est de 100 %, l'espace blanc est également inclus dans le calcul. Puisqu'il n'y a plus d'espace restant pour accueillir le deuxième élément, il est obligé de passer à la ligne suivante.

Pour résoudre ce problème et éviter que le deuxième élément ne se brise, l'espace blanc entre les éléments du bloc en ligne peut être retiré. En éliminant l'espace blanc, le calcul de la largeur est ajusté en conséquence et les deux éléments peuvent s'adapter confortablement sur la même ligne.

Cet ajustement peut être effectué à l'aide de CSS en définissant la propriété d'espace blanc de l'élément parent sur nowrap ou aucun, comme le montre l'exemple ci-dessous :

#parent-container {
  white-space: nowrap;
}

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!