Heim >Web-Frontend >CSS-Tutorial >So verhindern Sie, dass li in ul in CSS eingeschlossen wird
So verhindern Sie, dass li in ul in CSS eingeschlossen wird
- WBOYOriginal
- 2021-11-18 11:59:473462Durchsuche
So sorgen Sie dafür, dass li in ul nicht in CSS eingeschlossen wird: 1. Mit dem Float-Attribut müssen Sie nur den Stil „{float:left;}“ zum li-Element hinzufügen. 2. Mithilfe des Anzeigeattributs müssen Sie dem li-Element lediglich den Stil „{display:inline;}“ hinzufügen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzwingen Sie, dass ul li nicht in CSS eingeschlossen wird.
Wie Sie ul li zwingen, nicht in CSS einzubinden. In diesem Artikel erfahren Sie, wie Sie mit CSS erzwingen, dass ul li nicht in CSS eingeschlossen wird. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
1. Verwenden Sie den Float-Stil, um Li-Elemente nebeneinander ohne Zeilenumbrüche anzuzeigen.
In CSS können Sie das Float-Attribut verwenden, um Li-Elemente zu schweben und 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>Rendering:
2. Verwenden Sie display, um die Li nebeneinander ohne Zeilenumbrüche anzuzeigen.
Das Anzeigeattribut gibt den Typ der Box an, die das Element generieren soll.
Das Anzeigeattribut wird verwendet, um die Art des Anzeigefelds zu definieren, das vom Element beim Erstellen des Layouts generiert wird. Bei Dokumenttypen wie HTML kann die unvorsichtige Verwendung der Anzeige gefährlich sein, da sie möglicherweise die bereits in HTML definierte Anzeigehierarchie verletzt. Da XML nicht über diese Art von Hierarchie verfügt, ist die gesamte Anzeige unbedingt erforderlich.
inline: Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt.
Verwenden Sie display:inline, um das li-Element als Inline-Element anzuzeigen, ohne Zeilenumbrüche vor und nach dem Element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
display:inline
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>Rendering:
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass li in ul in CSS eingeschlossen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!