Maison > interface Web > tutoriel CSS > Comment réaliser l'affichage Li sans sauts de ligne en CSS

Comment réaliser l'affichage Li sans sauts de ligne en CSS

醉折花枝作酒筹
Libérer: 2023-01-05 16:10:58
original
3580 Les gens l'ont consulté

Méthode d'implémentation : 1. Utilisez l'attribut display pour convertir li en une étiquette de bloc en ligne ou en ligne. Il vous suffit de définir le style "display:inline|inline-block" pour li ; attribut à float , définissez simplement le style "float:left" sur l'élément.

Comment réaliser l'affichage Li sans sauts de ligne en CSS

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

Méthode 1 :

méthode d'affichage, vous devez convertir li en balises en ligne ou en balises de bloc en ligne

<html>
<head>
    <style type="text/css">
        li {
              display: inline;  <-- 或者inline-block -->
              list-style:none; 
              margin:0 20px;
        }
        div {
              display: none;
        }
    </style>
</head>
<body>
<ul>
  <li>aa</li>
  <li>bb</li>
  <li>cc</li>
  <li>dd</li>
</ul>
</body>
</html>
Copier après la connexion

Méthode 2 :

Sélectionner left Mode flottant, float : left ;

<html>
<head>
    <style type="text/css">
        li {
              float: left; 
              list-style:none; 
              margin:0 20px;
        }
        div {
              display: none;
        }
    </style>
</head>
<body>
<ul>
  <li>aa</li>
  <li>bb</li>
  <li>cc</li>
  <li>dd</li>
</ul>
</body>
</html>
Copier après la connexion

Apprentissage recommandé : 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!

Étiquettes associées:
li
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal