Comment faire apparaître un élément en ligne sur une nouvelle ligne ou un élément de bloc n’occupe pas la ligne entière?

Je ne peux pas comprendre comment faire avec CSS. Si je me contente d’utiliser un tag, cela fonctionne parfaitement, mais j’essaie d’éviter de le faire pour des raisons évidentes.

En gros, je veux juste que l’ .feature_desc commence sur une nouvelle ligne, mais:

  • Si j’en fais un élément en ligne, il n’y aura pas de saut de ligne.
  • Si je le transforme en élément bloc, il s’étendra à la ligne entière, en plaçant chacune de ces icons sur sa propre ligne et en gaspillant des tonnes d’espace à l’écran (chaque .feature_wrapper sera légèrement différente, mais aucune ne le sera jamais). être aussi large que l’écran entier.)

Exemple de code: Cela fonctionne, mais utilise une balise br :

 
  • started
    Getting Started Wizard
  • Je veux styliser cela avec CSS pour obtenir le même résultat:

     
  • started Getting Started Wizard
  • Des idées? Ou est-ce que je vais à ce sujet dans le mauvais sens?

    Vous pouvez lui donner un bloc d’affichage de propriété; donc il se comportera comme un div et aura sa propre ligne

    CSS:

     .feature_desc { display: block; .... } 

    Même si la question est assez floue et que l’extrait HTML est assez limité, je suppose

     .feature_desc { display: block; } .feature_desc:before { content: ""; display: block; } 

    pourrait vous donner envie de réaliser sans l’élément
    . Bien que cela aiderait à voir votre CSS appliqué à ces éléments.

    REMARQUE. L’exemple ci-dessus ne fonctionne pas dans IE7 cependant.

    Je pense que les flottants fonctionnent mieux pour vous ici, si vous ne voulez pas que l’élément occupe toute la ligne, le laisser flotter devrait fonctionner.

     .feature_wrapper span { float: left; clear: left; display:inline } 

    EDIT: maintenant les navigateurs ont un meilleur support, vous pouvez utiliser le do inline-block.

     .feature_wrapper span { display:inline-block; *display:inline; *zoom:1; } 

    Selon l’alignement du texte, cela apparaîtra comme à travers son alignement tout en agissant comme un élément de bloc.

    Pour que l’élément de bloc n’occupe pas la ligne entière, définissez sa largeur sur quelque chose de petit et l’ white-space:nowrap

     label { width:10px; display:block; white-space:nowrap; }