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

2096 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!