So erzielen Sie mit ul den Effekt einer horizontalen Anordnung ohne Zeilenumbruch

Sind Sie schon einmal auf diese Situation beim Seitenlayout gestoßen? Wenn ul horizontal angeordnet ist, wird es in neue Zeilen umgebrochen, aber das ist nicht der Effekt, den wir sehen möchten. Wissen Sie, wie man mit dieser Situation umgeht? In diesem Artikel erfahren Sie, wie Sie UL ohne Umwickeln horizontal anordnen. Wenn Sie interessiert sind, lesen Sie bitte die Kommentare.

Ich habe gerade das Frontend gelernt und versucht, verschiedene Layouts zu schreiben. Heute möchte ich eine horizontal angeordnete Fotoliste implementieren. Das erste, was mir in den Sinn kommt, ist, mit ul list-style auf none zu setzen. Dies stellt ul jedoch nur standardmäßig auf die horizontale Anordnung ein und schränkt das Umbrechen von ul nicht ein. Wenn die von ul festgelegte Breite nicht ausreicht, um das Bild aufzunehmen, wird das Bild automatisch umbrochen.

Überprüfen Sie daher die Informationen und zugehörigen Layoutattribute. Letztendlich wurden zwei Lösungen gefunden.

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 können wir sehen, dass beide Lösungen das Leerzeichenattribut verwenden, es ist unmöglich Vervollständigen Sie den Effekt ohne Zeilenumbrüche. 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 5347c3d061f1b90e45639e8ac6d3777b 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: Rendert 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.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit ul den Effekt einer horizontalen Anordnung ohne Zeilenumbruch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!