Explication graphique détaillée sur la façon de disposer les éléments li dans ul horizontalement (avec code)

Dans la mise en page, nous utilisons souvent la balise li, car la balise li est très polyvalente. Elle peut être utilisée pour créer des listes, des onglets, de la navigation, etc. Mais le li dans la balise

est disposé verticalement par défaut, pouvons-nous donc disposer le li horizontalement ? Cet article vous présentera deux méthodes pour réaliser une disposition horizontale des listes ul en HTML. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

La disposition horizontale des listes ul est souvent utilisée dans la navigation. Ensuite, nous utiliserons un exemple de navigation horizontale pour expliquer comment utiliser CSS pour organiser ul horizontalement.

Remarque :

1. Il y a de petits points devant la liste Li par défaut. Parfois, vous devez supprimer les petits points supplémentaires pour des raisons de beauté. Vous pouvez utiliser list-in CSS. Avec l'attribut style:none, vous pouvez bien sûr ajouter quelques images devant la liste.

2. Afin de rendre la page plus attrayante, la navigation utilise généralement des éléments de pseudo-classe. Le plus courant est le survol, qui peut modifier la couleur d'arrière-plan, la taille de la police, les images, etc. la souris passe dessus.

3. Utilisez intelligemment l'attribut display en CSS. Si vous devez donner au li une hauteur et une largeur et ajuster la position du contenu du menu, vous devez définir la valeur de l'attribut d'affichage sur block. Après l'avoir transformé en élément de niveau bloc, les attributs tels que padding et text-align prendront. effet.

1. display:inline réalise la disposition horizontale de ul

Utilisez ul li pour effectuer une navigation horizontale, de sorte que la couleur d'arrière-plan change lorsque la souris passe. Le code est le suivant :

Partie HTML :

<ul id="nav">
		<li><a href="#">首页</a></li>
		<li><a href="#">课程介绍</a></li>
		<li><a href="#">师资力量</a></li>
		<li><a href="#">新闻动态</a></li>
		<li><a href="#">联系我们</a></li>	
	</ul>

Partie CSS :

<style type="text/css">			
	#nav {
	        margin: 50px auto;
	        height: 40px;
	         background-color: #690;
	      }			
	#nav ul {
		list-style: none;
		margin-left: 50px;
		}			
	#nav li {
		display: inline;			    
		}			
	#nav a {
		line-height: 40px;
		color: #fff;
		text-decoration: none;
		padding: 20px 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

Rendu :




L'effet du passage de la souris :



2. Flotteur : gauche pour obtenir une disposition horizontale

Utiliser float : left pour atteindre ul est disposé horizontalement, et li se détachera du flux standard après avoir flotté, et n'occupera aucune position si son élément parent a un style spécifique et n'a pas de largeur et de hauteur fixes, vous devez effacer le flotteur de l'élément parent ou définir une largeur et une hauteur fixes. La partie HTML est la même que ci-dessus, et la partie CSS est la suivante :

<style type="text/css">
	#nav {
		height: 40px;
		margin-top: 50px;
		background-color: #690;
		}			
	#nav ul {
		list-style: none;			    
		margin-left: 50px;
		}			
	#nav li {
		display: block;
		float: left;
		}			
	#nav a {
		line-height: 40px;
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 0 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

L'effet est le même que ci-dessus, mais la méthode est différente.
Résumé : float:left et display:inline peuvent réaliser la disposition horizontale de ul li. La méthode spécifique à choisir dépend des habitudes personnelles et des besoins du projet. J'espère que cela pourra aider. toi.

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!