272 votes

Steve avatar

Comment faire pour que les éléments div s'affichent en ligne ?

Demandé el 22 de Octobre, 2008
Quand la question a-t-elle été
358351 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Étant donné ce HTML :

<div>foo</div><div>bar</div><div>baz</div>

Comment faire pour qu'ils s'affichent en ligne comme ceci :

foo bar baz

pas comme ça :

foo
bar
baz

Demandé el 22 de Octobre, 2008 par Steve

Réponses

Trop de publicités?

282voto

Darryl Hein avatar
Darryl Hein Points 33819

C'est autre chose alors :

div.inline { float:left; }
.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->
Répondu el 22 de Octobre, 2008 par Darryl Hein (33819 Points )

0 votes

Avatar de Necronet

En fait, c'est la seule façon que j'ai trouvée pour afficher correctement les lignes. Je ne sais pas pourquoi la solution no-float n'a pas fonctionné.....

Commenté el 5 de Mars, 2011 par Necronet

25 votes

Avatar de Berik

Les noms des classes css ici ne doivent pas être utilisés à titre d'exemple. Utilisez des noms sémantiques appropriés comme : css-tricks.com/semantic-class-names

Commenté el 20 de Mars, 2013 par Berik

273voto

bochgoch avatar
bochgoch Points 3669

Un div inline est un monstre du web & devrait être battu jusqu'à ce qu'il devienne un span (au moins 9 fois sur 10)...

<span>foo</span>
<span>bar</span>
<span>baz</span>

...répond à la question initiale...

Répondu el 31 de Décembre, 2008 par bochgoch (3669 Points )

11 votes

Avatar de Darryl Hein

Il arrive que vous souhaitiez que les divs s'affichent en ligne, par exemple, lorsque vous souhaitez ajouter une marge à gauche et à droite d'un élément. Je ne pense pas que cela puisse être fait avec un span. Steve devrait probablement utiliser float au lieu de inline.

Commenté el 7 de Octobre, 2010 par Darryl Hein

1 votes

Avatar de bochgoch

Je ne suis pas sûr de suivre Darryl, vous pouvez ajouter une marge ou un padding à un span>> <span style="color:white;background-color:black;margin:10px;padding:20px ;">xxxxx</span>.

Commenté el 7 de Octobre, 2010 par bochgoch

1 votes

Avatar de NexusRex

Qu'en est-il de l'utilisation d'un div avec une image d'arrière-plan dans un paragraphe de texte ? Il est souvent plus souhaitable d'utiliser un div avec une image d'arrière-plan définie via CSS que d'utiliser une balise img.

Commenté el 3 de Août, 2011 par NexusRex
Afficher 6 autres commentaires

185voto

yuku avatar
yuku Points 15705

Essayez de l'écrire comme ceci :

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>
Répondu el 22 de Octobre, 2008 par yuku (15705 Points )

18 votes

Avatar de Steve Perks

C'est la réponse correcte à la question, mais compte tenu de la réponse acceptée, je soupçonne que la question n'aborde pas le vrai scénario.

Commenté el 31 de Décembre, 2008 par Steve Perks

35voto

Steve Perks avatar
Steve Perks Points 2117

Après avoir lu cette question et les réponses plusieurs fois, je ne peux que supposer qu'il y a eu beaucoup d'édition, et je soupçonne qu'on vous a donné la mauvaise réponse parce que vous n'avez pas fourni assez d'informations. Mon indice vient de l'utilisation de br étiquette.

Mes excuses à Darryl. J'ai lu class="inline" comme style="display : inline". Vous avez la bonne réponse, même si vous utilisez des noms de classe sémantiquement discutables ;-)

L'utilisation manquée de br pour fournir une mise en page structurelle plutôt qu'une mise en page textuelle est beaucoup trop répandue à mon goût.

Si vous voulez mettre plus que des éléments en ligne à l'intérieur de ces éléments divs alors vous devriez faire flotter ces div plutôt que de les mettre en ligne.

Divs flottants :

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

Divs en ligne :

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

Si vous êtes après le premier, alors c'est votre solution et vous perdrez ces br tags :

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

Notez que la largeur de ces divs est fluide, donc n'hésitez pas à y mettre des largeurs si vous voulez contrôler le comportement.

Merci, Steve

Répondu el 31 de Décembre, 2008 par Steve Perks (2117 Points )

24voto

Paul Sweatte avatar
Paul Sweatte Points 8668

Utilisez display:inline-block avec une marge et une requête média pour IE6/7 :

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>
Répondu el 7 de Janvier, 2012 par Paul Sweatte (8668 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X