Maison > Article > interface Web > Comment obtenir une disposition horizontale de ul et li en CSS
Comment obtenir une disposition horizontale de ul et li en CSS
- 王林avant
- 2020-03-30 09:21:284572parcourir
Parce que li est un élément de niveau bloc, il occupe une ligne par défaut pour obtenir une disposition horizontale, les deux méthodes suivantes sont généralement utilisées :
float:left
Il y a. un problème avec ce paramètre. Une fois que li est flottant, il est séparé du flux de texte, c'est-à-dire qu'il n'occupe aucune position. Si son élément parent a un style spécifique et n'a pas de largeur et de hauteur fixes, il est recommandé. que l'élément parent efface son flotteur ou définisse une largeur et une hauteur fixes.
display:inline-block
C'est-à-dire que li est transformé en un élément en ligne et que la largeur, la hauteur et les marges peuvent être définies. Cela pose également un problème. Les versions inférieures des navigateurs Ie ne sont pas compatibles avec le bloc en ligne. Il est recommandé d'ajouter deux attributs après pour des raisons de compatibilité. Version basse, c'est-à-dire
(tutoriel recommandé : Tutoriel d'introduction CSS)
*display:inline; *zoom:1;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS + ul li 横向排列的两种方法 </title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
</ul>
</div>
</body>
</html>code CSS un :
* {
margin: 0;
border: 0;
padding: 0;
font-size: 13pt;
}
#nav {
height: 40px;
border-top: #060 2px solid;
border-bottom: #060 2px solid;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: inline;
line-height: 40px;
float:left
}
#nav a {
color: #fff;
text-decoration: none;
padding: 20px 20px;
}
#nav a:hover {
background-color: #060;
}code CSS deux :
* {
margin: 0;
border: 0;
padding: 0;
font-size: 13pt;
}
#nav {
height: 40px;
border-top: #060 2px solid;
margin-top: 100px;
border-bottom: #060 2px solid;
background-color: #690;
}
#nav ul {
list-style: none;
line-height: 40px;
margin-left: 50px;
}
#nav li {
display: block;
float: left;
}
#nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 20px;
}
#nav a:hover {
background-color: #060;
}Tutoriels vidéo associés recommandés : 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!