Comment implémenter CSS UL sans sauts de ligne

Comment implémenter CSS UL sans retour à la ligne : 1. Définissez une largeur suffisamment large, puis définissez l'attribut float de li à gauche ; 2. Utilisez "white-space:nowrap;" éléments de bloc et caractères de nouvelle ligne.

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

Comment faire en sorte que ul obtienne l'effet d'une disposition horizontale sans retour à la ligne

Option 1 :

Définissez une largeur suffisamment large, puis définissez l'attribut float de li à gauche . Cela signifie que les éléments li flottent vers la gauche. Le code est le suivant :

    ul{
    width:2000px;//设置足够的宽度
    overflow:hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
    }
    li{
    list-style:none;
    float:left;//向左排列
    margin-left:15px;
    width:130px;
    }

Option 2 :

  ul{
    display:block;
    overflow:hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
    }
    li{
    list-style:none;
    display:inline-block;//使li对象显示为一行
    margin-left:15px;
    width:130px;
    }

Ci-dessus, nous pouvons voir que les deux solutions utilisent l'attribut d'espace blanc. Sans cet attribut, l'effet d'absence de saut de ligne ne peut pas être obtenu. . Vous pouvez voir dans le manuel CSS que cet attribut est : comment gérer les espaces dans les éléments. Lorsque nowrap est sélectionné, le texte ne sera pas renvoyé à la ligne et continuera sur la même ligne jusqu'à ce que la balise
Mais il peut également être utilisé pour des éléments non textuels.

Il y a aussi l'attribut display. Dans l'option 2, si elle n'est pas définie sur inline-block, l'effet d'absence de saut de ligne ne peut pas être obtenu.

inline-block : rend l'objet comme un objet en ligne, mais le contenu de l'objet est rendu comme un objet bloc. Les objets en ligne adjacents seront rendus sur la même ligne, autorisant les espaces.

Caractéristiques du bloc en ligne : L'objet est présenté comme un objet en ligne, mais le contenu de l'objet est présenté comme un objet bloc. Les objets en ligne adjacents seront rendus sur la même ligne, autorisant les espaces. (Pour être précis, l'élément auquel cet attribut est appliqué est rendu en tant qu'objet en ligne et les éléments environnants restent sur la même ligne, mais les propriétés de largeur et de hauteur de l'élément de tracé peuvent être définies).

Cela résout le problème de la disposition horizontale des ul sans emballage. Il semble qu’il soit nécessaire de se familiariser avec les caractéristiques des différents attributs.

[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!