Maison >interface Web >tutoriel CSS >Comment réaliser l'affichage Li sans sauts de ligne en CSS
Comment réaliser l'affichage Li sans sauts de ligne en CSS
- 醉折花枝作酒筹original
- 2021-04-23 18:39:183619parcourir
Méthode d'implémentation : 1. Utilisez l'attribut display pour convertir li en une étiquette de bloc en ligne ou en ligne. Il vous suffit de définir le style "display:inline|inline-block" pour li ; attribut à float , définissez simplement le style "float:left" sur l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Méthode 1 :
méthode d'affichage, vous devez convertir li en balises en ligne ou en balises de bloc en ligne
<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>Méthode 2 :
Sélectionner left Mode flottant, 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>Apprentissage recommandé : tutoriel vidéo CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!