So verhindern Sie, dass div in CSS eingeschlossen wird

In der Webentwicklung ist CSS eine der Schlüsseltechnologien. Hier lernen wir, wie man das div-Element in CSS verwendet, um eine Anzeige ohne Umbruch zu erreichen. In diesem Tutorial erfahren Sie, wie Sie mit CSS die Breite, Höhe, horizontale und vertikale Ausrichtung eines div-Elements festlegen und verhindern, dass es umbrochen wird.

Das div-Element ist eines der am häufigsten verwendeten Containerelemente in HTML5. Sie werden häufig verwendet, um Inhalte auf Webseiten zu kombinieren. Der größte Vorteil der Verwendung von div-Elementen besteht darin, dass Sie verschiedene Elemente wie Text, Bilder, Tabellen und andere HTML-Elemente einfach positionieren und anordnen können.

So legen Sie die Breite und Höhe eines div-Elements mit CSS fest:

div {
  width: 200px; /* 设置 div 元素的宽度为 200 像素 */
  height: 100px; /* 设置 div 元素的高度为 100 像素 */
}

Wenn ein div-Element Text enthält und dieser die Breite des div-Elements überschreitet, wird er automatisch umbrochen. Wir können das Umbrechen von Text verhindern, indem wir CSS-Stile festlegen. Der folgende Code zeigt, wie das Leerraumattribut eines div-Elements festgelegt wird, um zu verhindern, dass Text umbrochen wird.

div {
  white-space: nowrap; /* 设置 div 元素中的文本不换行 */
}

Der obige Code lässt den gesamten Textinhalt in einer Zeile erscheinen.

Neben Breite, Höhe und Textumbruch können wir per CSS auch die horizontale und vertikale Ausrichtung festlegen. Der folgende Code zeigt, wie Sie den Text eines div-Elements mithilfe von CSS vertikal und horizontal zentrieren.

div {
  width: 200px;
  height: 100px;
  text-align: center; /* 设置 div 元素中的文本水平居中 */
  line-height: 100px; /* 设置 div 元素中的文本垂直居中 */
}

Im obigen Code betragen die Breite und Höhe des div-Elements 200 Pixel bzw. 100 Pixel. Die Eigenschaft text-align: center zentriert den Text horizontal, während die Eigenschaft line-height: 100px den Text vertikal zentriert. text-align: center 属性将使文本水平居中，而 line-height: 100px 属性将使文本在垂直方向上居中。

最后，我们将使用 display 属性来设置 div 元素在同一行上不换行显示。下面的代码演示了如何使用 display: inline-block 属性实现这个目的。

div {
  display: inline-block; /* 设置 div 元素在同一行上不换行显示 */
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

在上述代码中，display: inline-block 属性将使 div 元素在同一行上不换行显示。

总结

在本文中，我们学习了如何使用 CSS 设置 div 元素的宽度、高度、文本换行、文本水平和垂直居中，以及如何使用 display

Abschließend verwenden wir das Attribut display, um die div-Elemente so festzulegen, dass sie in derselben Zeile ohne Umbruch angezeigt werden. Der folgende Code zeigt, wie Sie das Attribut display: inline-block verwenden, um dies zu erreichen. 🎜rrreee🎜Im obigen Code führt das Attribut display: inline-block dazu, dass die div-Elemente in derselben Zeile ohne Umbruch angezeigt werden. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gelernt, wie man mit CSS die Breite, Höhe, den Textumbruch sowie die horizontale und vertikale Textzentrierung von div-Elementen festlegt und wie man das Attribut display verwendet div-Elemente in derselben Zeile werden ohne Zeilenumbrüche angezeigt. Diese Technologien sind für Webentwickler wichtig, da sie uns dabei helfen, bessere Webseiten zu entwerfen. 🎜

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass div in CSS eingeschlossen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!