Maison > interface Web > tutoriel CSS > Pourquoi mes éléments de bloc en ligne ne s'affichent-ils pas côte à côte ?

Pourquoi mes éléments de bloc en ligne ne s'affichent-ils pas côte à côte ?

Patricia Arquette
Libérer: 2024-12-10 13:20:10
original
296 Les gens l'ont consulté

Why Aren't My Inline-Block Elements Displaying Side-by-Side?

Éléments de blocs en ligne ne s'adaptant pas côte à côte sur une seule ligne

Dans le code HTML donné, nous visons à afficher deux éléments de bloc en ligne. bloquer les éléments, #left et #right, côte à côte sur une seule rangée, chaque élément occupant 50 % de la largeur. Cependant, au lieu d'aligner les éléments horizontalement, un espace apparaît entre eux.

Comprendre les éléments de bloc en ligne

En tant qu'éléments de bloc en ligne, #left et #right se comporter comme des éléments en ligne et en bloc. Ils existent sur la même ligne que les éléments en ligne, mais leur largeur et leur hauteur peuvent être définies comme des éléments de bloc.

Inline-Block Whisperspace

Lors de l'utilisation de inline-block , un espace blanc existe intrinsèquement entre les éléments adjacents en raison du « murmure », un espace invisible d'environ 4 px de large ajouté pour le remplissage et la séparation des lignes. Par conséquent, la largeur combinée des deux divs, y compris le Whisperspace, dépasse 100 %, brisant la disposition horizontale.

Solutions possibles

1. Ajustement de la largeur de l'élément :

Une solution consiste à réduire la largeur d'un div à 49 %, compensant ainsi l'espace murmuré. Cependant, cela peut laisser un écart visible entre les éléments.

2. Éléments flottants :

Une autre option consiste à faire flotter les deux divs, ce qui supprime le problème de l'espace chuchoté en les alignant sur une nouvelle ligne. Cette approche fonctionne efficacement mais peut compromettre le flux de la page.

Recommandation mise à jour :

Pour la compatibilité des navigateurs modernes, il est recommandé d'utiliser une disposition en grille flexbox ou CSS au lieu de bloc en ligne pour des mises en page comme celle-ci. Ces techniques offrent plus de contrôle sur l'espacement et permettent des conceptions réactives et adaptatives.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal