Implementierungsmethode: 1. Verwenden Sie das Anzeigeattribut, um li in eine Inline- oder Inline-Blockbezeichnung umzuwandeln. Sie müssen nur den Stil „display:inline|inline-block“ auf li setzen. 2. Verwenden Sie das Float-Attribut, um zu schweben. Legen Sie einfach den Stil „float:left“ für das Element fest.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1:
Anzeigemethode, Sie müssen li in Inline-Tags oder Inline-Block-Tags konvertieren
<html>
<head>
<style type="text/css">
li {
display: inline; <-- 或者inline-block -->
list-style:none;
margin:0 20px;
}
div {
display: none；
}
</style>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</body>
</html>Methode 2:
Wählen Sie die linke Floating-Methode aus, float: left;
<html>
<head>
<style type="text/css">
li {
float: left;
list-style:none;
margin:0 20px;
}
div {
display: none；
}
</style>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</body>
</html>Empfohlenes Lernen: css-Video Tutorial
Das obige ist der detaillierte Inhalt vonSo realisieren Sie eine Li-Anzeige ohne Zeilenumbrüche in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welches Element ist Li?
Was bedeutet Uplink-Port?
Der Unterschied zwischen Get-Request und Post-Request
Zusammenfassung häufig verwendeter Computer-Tastenkombinationen
CAD-Zeilenbruchbefehl
Formel des mechanischen Energieeinsparungsgesetzes
Was bedeutet Kol?
Im Gerätemanager gibt es keinen Netzwerkadapter
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
