Maison >interface Web >tutoriel CSS >Comment empêcher li in ul de s'emballer en CSS
Comment empêcher li in ul de s'emballer en CSS
- WBOYoriginal
- 2021-11-18 11:59:473462parcourir
Comment faire en sorte que li dans ul ne soit pas enveloppé dans du CSS : 1. En utilisant l'attribut float, il vous suffit d'ajouter le style "{float:left;}" à l'élément li. 2. En utilisant l'attribut display, il vous suffit d'ajouter le style "{display:inline;}" à l'élément li.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment forcer ul li à ne pas envelopper en CSS
Comment forcer ul li à ne pas envelopper en CSS. Cet article vous présentera comment utiliser CSS pour forcer ul li à ne pas envelopper. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
1. Utilisez le style float pour afficher les éléments li côte à côte sans sauts de ligne
En CSS, vous pouvez utiliser 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>Rendu :
2. Utilisez display pour afficher les li côte à côte sans sauts de ligne
L'attribut display spécifie le type de boîte que l'élément doit générer.
L'attribut display permet de définir le type de boîte d'affichage généré par l'élément lors de l'établissement de la mise en page. Pour les types de documents tels que HTML, une utilisation imprudente de display peut être dangereuse, car elle peut violer la hiérarchie d'affichage déjà définie en HTML. Pour XML, puisque XML n'a pas ce type de hiérarchie intégré, tout affichage est absolument nécessaire.
inline : par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément.
Utilisez display:inline pour afficher l'élément li en tant qu'élément en ligne, sans sauts de ligne avant et après l'élément.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
display:inline
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>Rendu :
Pour plus de connaissances liées à 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!