Comment empêcher li in ul de s'emballer en CSS-tutoriel CSS-php.cn

Comment empêcher li in ul de s'emballer en CSS

WBOY

Libérer： 2021-11-18 11:59:47

original

3466 Les gens l'ont consulté

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.

Comment empêcher li in ul de s'emballer en CSS

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>

Copier après la connexion

Rendu :

Comment empêcher li in ul de semballer en CSS

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>

Copier après la connexion

Rendu :

Comment empêcher li in ul de semballer en CSS