Ein Cascading Style Sheet (CSS) bietet eine Eigenschaft an, um alle HTML -Elemente ohne Unterbrechung anzuzeigen, oder Sie können sagen, dass alle HTML -Inhalte auf einer einzelnen Zeile angezeigt werden. HTML und CSS tragen beide dazu bei, dieses Phänomen auf der Webseite zu erreichen. Der grundlegende Vorteil davon ist, dass der HTML -Inhalt bei der Anzeige weniger Platz einnimmt. Es macht auch den Inhalt ausgerichtet.

In CSS gibt es keine integrierte Funktion wie die anderen Effekte, zum Beispiel die Textdekoration, den Typ-Stiltyp usw. Wir müssen diesen No-Line-Break-Effekt jedoch anwenden, indem wir eine Anzeigeeigenschaft verwenden, die als Inline-Block-Eigenschaft geschätzt wird.

Um den CSS No-Line Break-Eigenschaftseffekt zu implementieren, müssen Sie die Grundlagen von HTML und CSS kennenlernen. Wir werden einen Texteditor für den Code und einen Browser verwenden, um den Code im Editor zu implementieren. Lassen Sie uns die CSS-Eigenschaft von Inline-Block und seine Auswirkungen auf das Phänomen „No Line Break“ erläutern.

CSS Inline-Block-Eigenschaft

Diese Eigenschaft wird verwendet, um einen Artikel im Inline-Block-Container anzuzeigen. In diesem Ansatz wird der Elementblock in das Inline -Element umgewandelt. Auf diese Weise wird die Linienpause vorbeugt. Die Syntax der Inline-Block-Eigenschaft wird im Folgenden angezeigt:

Artikel
Anzeige: Inline-Block;

Wir werden diese Eigenschaft auf zwei Arten implementieren: über die Liste und die DIV.

Beispiel 1: Keine Zeilenunterbrechung in Listen

Im ersten Beispiel werden wir das No-Line-Break-Konzept auf der Liste anwenden. Eine Liste ist ein HTML. Wenn wir über Listen sprechen, haben wir immer die Ansicht, dass jedes Element der Liste in einer separaten Zeile mit einer Zeilenpause vorliegt. Aber manchmal möchten wir nach dem Szenario die Listenelemente ohne Kugeln in einer einzelnen Zeile anzeigen. Dies erfolgt durch Anzeigen der Listenelemente mithilfe des CSS mit der Eigenschaft „No Line Break“. Starten wir den HTML -Code mit dem Körperabschnitt.

Wir haben zwei Überschriften des Textes über die Überschriften -Tags verwendet -

Und

. Danach wird die ungeordnete Liste mit 5 Elementen in jeder Zeile erstellt.

• Computernetzwerk


• …

Die gleiche Syntax wird befolgt, damit die 5 Elemente in jede Zeile eingegeben werden sollen.

Danach die Tag schließt die Liste und schließt auch den Rest der Tags ebenfalls. Betrachten Sie nun die Style -Tags, da wir die Anzeigeeigenschaft in der Liste anwenden müssen, damit jedes Listenelement in einer einzelnen Zeile angezeigt wird.

Li
Anzeige: Inline-Block;

Wir verwenden das LI-Tag direkt im CSS, um den Inline-Block-Effekt auf alle Listenelemente anzuwenden und zu verhindern, dass sie auf einer separaten Zeile angezeigt werden. Darüber hinaus tragen wir die Schriftfarbe auf beide Überschriften auf. Dies ist ein zusätzlicher Stil und ist nicht obligatorisch zu verwenden.

Für den Körperstil verwenden wir die Hintergrundfarbe und die Schriftart. Eine weitere wichtige Funktion, mit der die Anzeigeeigenschaft angewendet wird.

Körper
Breite: 60%;

Speichern Sie den Code in der Textedateidatei mit der HTML -Erweiterung, um ihn zu einem Symbol des Browsers zu machen, das zeigt, dass es sich um eine Webseite handelt. Führen Sie es im Browser aus. Die erwartete Webseite enthält eine Liste aller Elemente in einer vertikalen Notation, wenn es keine Inline-Block-Eigenschaft gibt.

Infolge dieser Anzeige -CSS -Eigenschaft sehen wir jedoch, dass alle Elemente auf der Liste in einer einzigen horizontalen Linie ohne Kugeln angezeigt werden. Es sieht nicht mehr wie eine Liste aus. Aber es sieht aus wie ein einfacher Absatz mit den Standardräumen zwischen den Wörtern.

Beispiel 2: Keine Zeile bricht in Div ein

Genau wie bei Listen können wir, wenn die Liste in einen Absatz umgewandelt wird, den Anzeigeeffekt auf jeden anderen HTML -Inhalt anwenden. Also haben wir einen Div ausgewählt. Ein Div ist der Behälter, der den anderen HTML -Inhalt darin enthält. Betrachten Sie zunächst ein einfaches Div -Tag, in dem wir keinen CSS -Effekt von „No Line Break“ angewendet haben. Die DIV wird jedoch mit seinen grundlegenden Stilen wie Polsterung und Farbe geliefert, um die Existenz beider Divs auf der Webseite anzuzeigen.

Div eins

Das gleiche gilt für die Div zwei.

Speichern Sie den Code und führen Sie ihn im Browser aus. Sie werden sehen, dass zwei Divs vertikal mit den Spezifikationen angezeigt werden, die wir als Inline -CSS innerhalb der Tags angewendet haben. Diese Divs werden ohne Unterbrechung zwischen ihnen angezeigt. Wie im Ausgang zu sehen ist, sind beide Divs angebracht.

Immer wenn ein Div oder eine Tabelle in der HTML verwendet wird, liegen beide nacheinander in vertikaler Richtung, wie wir dargestellt haben. Dies liegt daran. Mithilfe des Phänomens „No Line Break“ werden wir einige Änderungen im Code unterzogen.

Zunächst wenden wir die Anzeigeeigenschaft mit der Inline-Block-Eigenschaft auf beide Divs in CSS an.

Div
Anzeige: Inline-Block;

Darüber hinaus müssen wir die Körperbreite des HTML reduzieren, damit sich beide Divs auf die gegebene Körpergröße anpassen können.

Körper
Breite: 30%;

Bei der Ausführung sehen Sie, dass die beiden Divs, die wir erklärten.

Zusätzliche Möglichkeiten:

Einige zusätzliche Informationen über die Eigenschaft der „No -Line -Pause“ werden über die HTML -Tags ohne Verwendung der CSS -Tags getrennt begleitet.

Eine Möglichkeit besteht darin, die Zeichenfolge   zu verwenden. Wenn Sie diese Zeichenfolge zwischen zwei Zeichenfolgen verwenden
Tag, das in Richtung der folgenden Zeile führt. Der und (&) -operator wird für Bindungszwecke verwendet.

123  

Eine andere Möglichkeit einer Lücke zwischen zwei Saiten besteht darin, dass HTML eine integrierte Funktion „NBSP“ oder den „nicht sprechenden Raum“ verwendet. Wir verwenden die NBSP zwischen zwei Zahlen. Die Ergebnisse werden einen Platz haben.

456

Nach der Ausführung sehen Sie den Raum zwischen diesen drei Zahlen, ohne die Linienspanne zu verwenden.

Abschluss

Der CSS -Artikel „No Line Break“ erläutert die Verwendung der Eigenschaften von CSS und HTML außer dem Break -Effekt, der durch das HTML -Break -Tag angewendet wird
. Zu Beginn gaben wir eine einfache Einführung zu HTML und CSS. Die Eigenschaft, die hauptsächlich für den Effekt „No Line Break“ verantwortlich ist, wird als Inline-Block-Display-Eigenschaft erklärt. Wir haben die Inline-Block-Anzeigeverbrauch in den HTML-Listen und die Div-Container anhand von Beispielen erläutert. Darüber hinaus werden einige zusätzliche Informationen zu diesem Thema hinzugefügt.