Heim >Web-Frontend >CSS-Tutorial >So realisieren Sie eine Li-Anzeige ohne Zeilenumbrüche in CSS
So realisieren Sie eine Li-Anzeige ohne Zeilenumbrüche in CSS
- 醉折花枝作酒筹Original
- 2021-04-23 18:39:183667Durchsuche
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!