Comment obtenir une disposition horizontale de ul et li en CSS-tutoriel CSS-php.cn

Comment obtenir une disposition horizontale de ul et li en CSS

王林

Libérer： 2020-03-30 09:21:28

avant

4611 Les gens l'ont consulté

Comment obtenir une disposition horizontale de ul et li en CSS

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

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

<!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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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!