CSS-Methode zur Lösung der Lücke, die durch display:inline-block;-CSS-Tutorial-php.cn

CSS-Methode zur Lösung der Lücke, die durch display:inline-block;

巴扎黑

Freigeben： 2017-05-21 10:38:10

Original

1768 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode von CSS vor, die durch display:inline-block; verursacht wird. Sie hat einen bestimmten Referenzwert.

Heute habe ich display:inline-block verwendet, als ich horizontale H5-Schiebekarten erstellt habe, aber festgestellt habe, dass es Lücken zwischen Elementen auf derselben horizontalen Linie gab, also habe ich auf „Left Floating“ umgestellt , wodurch das Lückenproblem gelöst wurde, aber die Breite des übergeordneten Elements muss festgelegt werden, um einen horizontalen Bildlauf nach links und rechts zu erreichen, was die Codemenge erhöht, da die Anzahl der Karten nicht festgelegt ist und das übergeordnete Element festgelegt werden muss In Echtzeit ist die Verwendung von js erforderlich, sodass die Codemenge zunimmt, was nicht die beste Wahl ist. Es scheint, dass die beste Lösung darin besteht, display:inline-block; zu verwenden, sodass das Lückenproblem auftritt. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Diese Lücke besteht offensichtlich. Es wird gesagt, dass die Leistung, die der Spezifikation entsprechen sollte, durch die durch Zeilenumbrüche verursachten Leerzeichen verursacht wird. Aber dieser Effekt ist offensichtlich nicht das, was wir wollen. Die Lücke, die wir wollen, ist der Spielraum, den wir entsprechend unseren tatsächlichen Bedürfnissen festlegen. Wie kann diese Lücke geschlossen werden? Es gibt drei Methoden:

Methode eins: Keine Zeilenumbrüche zwischen Elementen, der Code lautet wie folgt:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Methode 2: Setzen Sie die Schriftgröße:0 auf den Wert übergeordnetes Element; setzt die tatsächliche Schriftgröße auf sich selbst. Die erforderliche Schriftgröße. Das Schlimme ist, dass einige Browser wie Chrome und Opera über minimale Schriftarteinstellungen verfügen, der aktuelle Chrome jedoch nicht über diese Einstellung zu verfügen scheint. Der Code lautet wie folgt:

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;}

Nach dem Login kopieren

html:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Methode 3: Methode mit negativem Rand Es ist zu beachten, dass diese Lücke mit der Schriftgröße zusammenhängt, sodass es sich bei der Lücke nicht um einen bestimmten Wert handelt.

Die oben genannten drei Methoden, die ersten beiden sind bessere Lösungen, die dritte Methode wird nicht empfohlen. Es gibt andere Lösungen online, aber ich denke, die ersten beiden sind besser.

PS:

Basierend auf den Kommentaren und Vorschlägen der meisten Frontend-Experten können Sie display:flex auch auf das übergeordnete Element festlegen, um Lücken zu schließen, und die Menge an Code beträgt weniger, aber es wird auf meiner Ebene verwendet. Der Effekt des Verschiebens von Karten führt dazu, dass sich alle Elemente im sichtbaren Fenster befinden und ein horizontales Verschieben nach links und rechts nicht erreicht werden kann.

Das obige ist der detaillierte Inhalt vonCSS-Methode zur Lösung der Lücke, die durch display:inline-block;. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!