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

Avez-vous déjà rencontré cette situation lors de la mise en page ? Lorsque ul est disposé horizontalement, il passera à de nouvelles lignes, mais ce n'est pas l'effet que nous souhaitons voir. Savez-vous comment gérer cette situation ? Cet article vous expliquera comment organiser ul horizontalement sans emballage. Si vous êtes intéressé, veuillez lire les commentaires.

Je viens d'apprendre le front-end et j'ai essayé d'écrire diverses mises en page. Aujourd'hui, je souhaite implémenter une liste de photos disposées horizontalement, donc la première chose qui me vient à l'esprit est d'utiliser ul pour définir le style de liste sur aucun. Mais cela ne définit par défaut que ul sur une disposition horizontale et n'empêche pas ul de s'enrouler. Lorsque la largeur définie par ul n'est pas suffisante pour accueillir l'image, l'image sera automatiquement renvoyée à la ligne.

Vérifiez donc les informations et les attributs de mise en page associés. Finalement, deux solutions ont été trouvées.

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;
}

Solution 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 espace blanc If not This. L'attribut ne peut pas obtenir l'effet d'aucun saut de ligne. 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.

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!