Explication détaillée de la façon de résoudre l'écart causé par display:inline-block dans la mise en page CSS-tutoriel CSS-php.cn

Explication détaillée de la façon de résoudre l'écart causé par display:inline-block dans la mise en page CSS

伊谢尔伦

Libérer： 2017-05-30 13:42:27

original

2040 Les gens l'ont consulté

J'ai utilisé display:inline-block lors de la création de cartes coulissantes horizontales H5 ; mais j'ai constaté qu'il y avait des espaces entre les éléments sur la même ligne horizontale. Ce n'était évidemment pas l'effet que je voulais, alors je l'ai modifié. flottant à gauche, ce qui a résolu le problème des espaces, mais la largeur de l'élément parent doit être définie pour obtenir un défilement horizontal vers la gauche et la droite, ce qui augmente la quantité de code. Parce que le nombre de cartes n'est pas fixe, la largeur de son parent. L'élément doit être défini en temps réel. La largeur nécessite js, donc la quantité de code augmente, ce qui n'est pas le meilleur choix. Il semble que la meilleure solution soit d'utiliser display:inline-block;, donc le problème de l'écart se pose. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>document</title>
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<p class="box">
    <span>111</span>
    <span>111</span>
    <span>111</span>
    <span>111</span>
</p>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Cet écart existe évidemment. est conforme aux spécifications et devrait être là. Les performances sont causées par des caractères d'espacement provoqués par des sauts de ligne. Mais cet effet n'est évidemment pas ce que nous souhaitons. L'écart que nous souhaitons est la marge que nous fixons en fonction de nos besoins réels. Alors comment combler cet écart ? Il existe trois méthodes :

Première méthode : Aucun saut de ligne entre les éléments Le code est le suivant :

<p class="box">  <span>111</span><span>111</span><span>111</span><span>111</span>
</p>

Copier après la connexion

L'effet est. comme suit :

Méthode 2 : Définissez font-size:0 pour son élément parent, définissez la taille de police réellement requise ; pour lui-même. Le problème est que certains navigateurs, comme Chrome et Opera, ont des paramètres de police minimaux, mais le chrome actuel ne semble pas avoir ce paramètre. Le code est le suivant :

css:

.box{overflow-x:auto;background:#fff;white-space:nowrap;font-size:0;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;font-size:14px;}

Copier après la connexion

html :

<p class="box">
    <span>111</span>
    <span>111</span>
    <span>111</span>
    <span>111</span>
</p>

Copier après la connexion

L'effet est le suivant :

Méthode 3 : Méthode de marge négative, veuillez noter que cet écart est lié à la taille de la police, donc l'écart n'est pas une certaine valeur.

Les trois méthodes ci-dessus, les deux premières sont de meilleures solutions, la troisième méthode n'est pas recommandée. Il existe d'autres solutions en ligne, mais je pense que les deux premières sont meilleures.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée de la façon de résoudre l'écart causé par display:inline-block dans la mise en page CSS