Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie die durch display:inline-block im CSS-Layout verursachte Lücke geschlossen werden kann

Ausführliche Erklärung, wie die durch display:inline-block im CSS-Layout verursachte Lücke geschlossen werden kann

伊谢尔伦Original: 2017-05-30 13:42:272051Durchsuche

Ich habe display:inline-block verwendet, als ich horizontale H5-Schiebekarten erstellt habe, aber ich habe festgestellt, dass es Lücken zwischen Elementen auf derselben horizontalen Linie gab. Dies war offensichtlich nicht der Effekt, den ich wollte, also habe ich ihn geändert Nach links schwebend, wodurch das Problem der Lücken gelöst wurde, muss jedoch die Breite des übergeordneten Elements festgelegt werden, um einen horizontalen Bildlauf nach links und rechts zu erreichen, wodurch sich die Codemenge erhöht. Da die Anzahl der Karten nicht festgelegt ist, ist die Breite des übergeordneten Elements nicht festgelegt Die Breite des Elements muss in Echtzeit festgelegt werden, daher erhöht sich die Codemenge, was nicht die beste Wahl ist. Es scheint, dass die beste Lösung darin besteht, display:inline-block; zu verwenden, daher entsteht das Lückenproblem. 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>

Der Effekt ist wie folgt:

Diese Lücke besteht offensichtlich entspricht den Spezifikationen und sollte vorhanden sein. Die Leistung wird durch Leerzeichen verursacht, die durch Zeilenumbrüche verursacht werden. 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>

Der Effekt ist wie folgt:

Methode 2: Schriftgröße festlegen: 0 für das übergeordnete Element festlegen; für sich. 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;}

html:

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

Der Effekt ist wie folgt:

Methode 3: Methode mit negativem Rand. Bitte beachten Sie, 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.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie die durch display:inline-block im CSS-Layout verursachte Lücke geschlossen werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung einiger gängiger CSS-SelektorbeispieleNächster Artikel：Ausführliche Erläuterung einiger gängiger CSS-Selektorbeispiele

In Verbindung stehende Artikel

Mehr sehen