Maison > interface Web > tutoriel CSS > le corps du texte

Comment organiser la liste CSS horizontalement

王林
Libérer: 2020-11-16 09:29:33
original
12576 Les gens l'ont consulté

Comment organiser la liste CSS horizontalement : vous pouvez utiliser l'attribut [display:inline] pour définir la balise [

  • ] en tant qu'élément en ligne afin d'obtenir l'effet d'arrangement horizontal. L'attribut display spécifie le type de boîte que l'élément doit générer.
  • Comment organiser la liste CSS horizontalement

    Idée :

    Définissez le display:inline de la balise

  • et définissez
  • Obtenez l'effet d'une disposition horizontale.

    (Tutoriel recommandé : Tutoriel vidéo CSS)

    Introduction à l'attribut :

    L'attribut display spécifie le type de boîte que l'élément doit générer.

    Code spécifique :

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表横向排列的另一种方法</title>
    <style type="text/css">
    ul li{display:inline;background:#F93; padding:5px;}}
    </style>
    </head>
    
    <body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
    </body>
    </html>
    Copier après la connexion

    Effet :

    Comment organiser la liste CSS horizontalement

    Problème : entre

    li Là est un écart

    Solution :

    Écrivez li sur une seule ligne

    <ul>
        <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
    </ul>
    Copier après la connexion

    Effet :

    Comment organiser la liste CSS horizontalement

    Recommandations associées : Tutoriel 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:
    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