Maison >interface Web >tutoriel CSS >Comment organiser la liste CSS horizontalement

Comment organiser la liste CSS horizontalement

王林
王林original
2020-11-16 09:29:3312625parcourir

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>

    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>

    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!

    Déclaration:
    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

    Articles Liés

    Voir plus