Méthode CSS pour résoudre l'écart causé par display:inline-block layout;-tutoriel CSS-php.cn

Méthode CSS pour résoudre l'écart causé par display:inline-block layout;

巴扎黑

Libérer： 2017-05-21 10:38:10

original

1769 Les gens l'ont consulté

Cet article présente principalement la méthode CSS pour résoudre l'écart (gap) causé par display:inline-block;. Il a une certaine valeur de référence. Si vous en avez besoin, vous pouvez en apprendre davantage.

Aujourd'hui, 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'est évidemment pas l'effet que je souhaite, j'ai donc changé pour laisser flottant. , ce qui a résolu le problème de l'écart, 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, car le nombre de cartes n'est pas fixe et son élément parent doit être défini. en temps réel, la largeur nécessite l'utilisation de 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. On dit que cette performance est La performance qui devrait être conforme à la spécification est causée par les caractères d'espacement provoqués par les 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 : Pas de 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 le suivant :

Méthode 2 : Définissez font-size:0 sur sa valeur élément parent ; définit la taille de police réelle sur elle-même. La taille de police requise. 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 Il convient de noter que cet écart est lié à la taille de la police, l'écart n'est donc 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.

PS :

Sur la base des commentaires et suggestions de la majorité des experts front-end, vous pouvez également définir display:flex sur son élément parent pour éliminer les lacunes, et la quantité de code est moins, mais il est utilisé à mon niveau. L'effet des cartes coulissantes fait que tous les éléments sont dans la fenêtre visible, et le glissement horizontal vers la gauche et la droite ne peut pas être obtenu.

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!