So implementieren Sie CSS UL ohne Zeilenumbrüche

So implementieren Sie CSS UL ohne Zeilenumbrüche: 1. Stellen Sie eine ausreichend breite Breite ein und setzen Sie dann das Float-Attribut von li auf left; 2. Verwenden Sie „white-space:nowrap;“, um Leerzeichen und Zeilenumbrüche in Blockelementen zu verarbeiten .

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie ordne ich ul horizontal ohne Umbruch an? Option 1:

Stellen Sie eine ausreichend breite Breite ein und setzen Sie dann das Float-Attribut von li auf links. Dies bedeutet, dass die li-Elemente nach links verschoben werden. Der Code lautet wie folgt:

    ul{
    width:2000px;//设置足够的宽度
    overflow:hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
    }
    li{
    list-style:none;
    float:left;//向左排列
    margin-left:15px;
    width:130px;
    }

Option 2:

  ul{
    display:block;
    overflow:hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
    }
    li{
    list-style:none;
    display:inline-block;//使li对象显示为一行
    margin-left:15px;
    width:130px;
    }

Oben sehen wir, dass beide Lösungen das Leerraumattribut verwenden. Ohne dieses Attribut kann der Effekt ohne Zeilenumbrüche nicht erreicht werden. Sie können dem CSS-Handbuch entnehmen, dass es sich bei diesem Attribut um den Umgang mit Leerzeichen innerhalb von Elementen handelt. Wenn „nowrap“ ausgewählt ist, wird der Text nicht umgebrochen und der Text wird in derselben Zeile fortgesetzt, bis das
-Tag gefunden wird. Es kann aber auch für Nicht-Text-Elemente verwendet werden.

Es gibt auch das Anzeigeattribut. Wenn Option 2 nicht auf Inline-Block eingestellt ist, kann der Effekt ohne Zeilenumbrüche nicht erreicht werden.

Inline-Block: Rendern Sie das Objekt als Inline-Objekt, aber der Inhalt des Objekts wird als Blockobjekt gerendert. Benachbarte Inline-Objekte werden in derselben Zeile gerendert, sodass Leerzeichen möglich sind.

Funktionen von Inline-Block: Das Objekt wird als Inline-Objekt dargestellt, der Inhalt des Objekts wird jedoch als Blockobjekt dargestellt. Benachbarte Inline-Objekte werden in derselben Zeile gerendert, sodass Leerzeichen möglich sind. (Um genau zu sein, wird das Element, auf das dieses Attribut angewendet wird, als Inline-Objekt gerendert und die umgebenden Elemente bleiben auf derselben Linie, aber die Breiten- und Höheneigenschaften des Plotelements können festgelegt werden.)

Dies löst das Problem der horizontalen Anordnung von ul ohne Umhüllung. Es scheint notwendig zu sein, mit den Eigenschaften verschiedener Attribute vertraut zu sein.

【Empfohlenes Lernen:

CSS-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonSo implementieren Sie CSS UL ohne Zeilenumbrüche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!