Comment forcer Li à ne pas envelopper en CSS

Méthode CSS pour forcer li à ne pas s'enrouler : 1. Utilisez l'attribut display pour convertir l'élément li en un élément en ligne ou un élément de bloc en ligne. S'il n'y a pas de saut de ligne avant et après l'élément, ce sera le cas. ne pas pouvoir envelopper. 2. Utilisez l'attribut float pour ajouter le style "float:left;" à l'élément li pour faire flotter les éléments li et les afficher côte à côte.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

li est un élément block par défaut, commençant toujours sur une nouvelle ligne et occupant une ligne entière.

<ul>
	<li>
		<a href="http://www.php.cn/">首页</a>
	</li>
	<li>
		<a href="http://www.php.cn/">关于我们</a>
	</li>
	<li>
		<a href="http://www.php.cn/">联系我们</a>
	</li>
</ul>

Rendu :

Alors comment forcer Li à ne pas envelopper ? Vous pouvez utiliser les attributs display ou float, qui sont présentés en détail ci-dessous.

Méthode 1 : utilisez l'attribut d'affichage

pour définir le style "display:inline;" ou "display:inline-block;" la balise li en tant qu'éléments en ligne ou éléments de bloc en ligne peut empêcher le retour à la ligne de la balise li.

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

Rendu :

Description :

Caractéristiques des éléments inline :

• Le réglage de la largeur et de la hauteur n'est pas valide

• Le réglage de la marge n'est valable que dans les directions gauche et droite, pas vers le haut et vers le bas ; en bas, à gauche et à droite, ce qui agrandira l'espace

• Ne s'enroule pas automatiquement

Caractéristiques des éléments de bloc en ligne :

• Ne s'enroule pas automatiquement

• Capable d'identifier la largeur et la hauteur

• La disposition par défaut est de gauche à droite

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS )

Méthode 2 : Utiliser l'attribut float

Utilisez l'attribut float pour faire flotter les éléments li et les afficher côte à côte. Le flottement est une méthode permettant de retirer un élément du flux du document, de le déplacer vers la gauche ou la droite et de réorganiser les éléments autour de lui.

li {
	float: left;
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

Rendu :

Description :

Floating est une méthode de mise en page très utile qui peut changer la page. ordre de reflux des objets dans l'objet. L’avantage est que cela simplifie la mise en page du contenu et offre une bonne évolutivité.

Flottant est une fonction de mise en page très puissante de la mise en page CSS, et c'est également l'élément clé dans la compréhension de la mise en page CSS. En CSS, n'importe quel élément, y compris div, peut être affiché de manière flottante.

Flottant permet à un élément avec l'attribut flottant défini d'échapper au contrôle du flux ordinaire standard et de se déplacer vers une position spécifiée dans son élément parent.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!