Wie man li zwingt, nicht in CSS einzubinden

Css-Methode, um zu erzwingen, dass li nicht umbrochen wird: 1. Verwenden Sie das Anzeigeattribut, um das li-Element in ein Inline-Element oder ein Inline-Blockelement umzuwandeln. Wenn vor und nach dem Element keine Zeilenumbrüche vorhanden sind, ist dies nicht möglich wickeln. 2. Fügen Sie mit dem Float-Attribut den Stil „float:left;“ zum li-Element hinzu, um die li-Elemente zu schweben und nebeneinander anzuzeigen.

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

li ist standardmäßig ein Blockelement, das immer in einer neuen Zeile beginnt und eine ganze Zeile einnimmt.

<ul>
	<li>
		<a href="http://www.php.cn/">首页</a>
	</li>
	<li>
		<a href="http://www.php.cn/">关于我们</a>
	</li>
	<li>
		<a href="http://www.php.cn/">联系我们</a>
	</li>
</ul>

Rendering:

Wie kann man Li zwingen, nicht zu wickeln? Sie können die Attribute display oder float verwenden, die im Folgenden ausführlich vorgestellt werden.

Methode 1: Verwenden Sie das Anzeigeattribut

, um den Stil „display:inline;“ oder „display:inline-block;“ für das li-Tag festzulegen und das li-Tag als Inline-Element oder Inline-Blockelement anzuzeigen Damit die li-Tag-Etiketten nicht umbrochen werden.

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

Rendering:

Beschreibung:

Eigenschaften von Inline-Elementen:

• Das Einstellen von Breite und Höhe ist ungültig.

• Nur der Einstellungsrand ist in der linken und rechten Richtung gültig, nicht nach oben und unten ; Die Auffülleinstellungen sind sowohl nach oben als auch nach unten, links und rechts wirksam, das heißt, der Raum wird erweitert.

• Kein automatischer Zeilenumbruch

Möglichkeit, Breite und Höhe zu identifizieren

Die Standardanordnung ist von links nach rechts float-Attribut, um die li-Elemente schweben zu lassen und sie nebeneinander anzuzeigen. Floating ist eine Methode, ein Element aus dem Dokumentfluss herauszunehmen, es nach links oder rechts zu verschieben und Elemente darum herum neu anzuordnen.

• li {
  	float: left;
  	margin-right: 10px;
  	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
  }

  Rendering:

Beschreibung:

• Floating ist eine sehr nützliche Layoutmethode, mit der die Reihenfolge des Vorwärts- und Rückwärtsflusses von Objekten auf der Seite geändert werden kann. Dies hat den Vorteil, dass das Layout des Inhalts einfach ist und eine gute Skalierbarkeit gewährleistet ist.

Floating ist eine sehr leistungsstarke Layoutfunktion des CSS-Layouts und auch das Schlüsselproblem beim Verständnis des CSS-Layouts. In CSS kann jedes Element, einschließlich div, schwebend angezeigt werden.

Floating ermöglicht es Elementen, die mit dem Floating-Attribut festgelegt sind, der Kontrolle des normalen Standardflusses zu entkommen und sich an eine angegebene Position in ihrem übergeordneten Element zu bewegen. Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonWie man li zwingt, nicht in CSS einzubinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!