Comment faites-vous pour afficher les éléments div en ligne?

254

Compte tenu de ce HTML:

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

Comment les faites-vous afficher en ligne comme ceci:

foo bar baz

pas comme ça:

foo
bar
baz

css line html Steve
la source

Réponses:

268

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 -->
Développer l'extrait

Darryl Hein
la source
en fait, c'est la seule façon que j'ai trouvé d'afficher correctement en ligne, je ne sais pas pourquoi la solution sans flotteur n'a pas fonctionné ....
Necronet
23
Les noms de classe css ici ne doivent pas être utilisés comme exemple. Utilisez une dénomination sémantique appropriée comme: css-tricks.com/semantic-class-names
Berik
261

Un div en ligne est un monstre du web et doit être battu jusqu'à ce qu'il devienne une travée (au moins 9 fois sur 10) ...

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

... répond à la question d'origine ...

bochgoch
la source
11
Il y a des moments où vous voulez que les divs s'affichent en ligne, par exemple, quand vous voulez ajouter une marge à gauche et à droite d'un élément. Je ne pense pas que cela puisse être fait avec une durée. Cependant, Steve devrait probablement utiliser float au lieu de inline.
Darryl Hein
8
padding yes, not margin
Andreas Wong
8
Malheureusement, HTML5 ne prend pas en charge la mise d'un div dans un <span>. J'avais l'habitude d'utiliser des <span> pour mettre des styles CSS sur une section et ne pas laisser le navigateur interpréter la section comme un bloc et forcer sa disposition de bloc sur moi. Mais je viens de découvrir aujourd'hui lors du portage de ma page vers JQuery Mobile + HTML5 que si vous avez un <div> dans un <span>, le validateur HTML5 se plaindra qu'il n'est pas valide HTML5 donc il y a des cas où l'utilisation de la balise <span> au lieu de un <div> en ligne n'est pas possible, au moins avec HTML5.
Kmeixner
4
Parfois, même si vous vivez dans un monde que vous n'avez pas créé et la seule chose que vous pouvez changer dans le CSS. Dans ce cas, style = "display: inline" fonctionne bien.
Matthew Lock
3
Si vous n'êtes pas «coincé» avec l'utilisation de divs, c'est une bonne réponse. Mais il peut y avoir de nombreuses raisons pour lesquelles vous devez utiliser des divs, mais vous devez les faire apparaître comme des éléments en ligne.
Bobble
174

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>
Développer l'extrait

Randy Sugianto «Yuku»
la source
16
C'est la bonne réponse à la question, mais compte tenu de la réponse acceptée, je soupçonne que la question ne répond pas au scénario réel.
Steve Perks
34

Après avoir lu cette question et les réponses à quelques reprises, tout ce que je peux faire est de supposer qu'il y a eu pas mal de modifications en cours, et je soupçonne que vous avez reçu une réponse incorrecte basée sur le fait de ne pas fournir suffisamment d'informations. Mon indice vient de l'utilisation du brtag.

Toutes 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 ;-)

La mauvaise utilisation de br pour fournir une disposition structurelle plutôt que pour une disposition textuelle est beaucoup trop répandue à mon goût.

Si vous voulez mettre plus que des éléments en ligne à l'intérieur de ceux-ci, divsvous devriez les faire flotter divplutôt que de les faire en ligne.

Divs flottants:

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

Divs en ligne:

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

Si vous recherchez l'ancien, alors c'est votre solution et perdez ces brbalises:

<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, alors n'hésitez pas à leur donner des largeurs si vous voulez contrôler le comportement.

Merci, Steve

Steve Perks
la source
24

Utilisation display:inline-blockavec 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>
Paul Sweatte
la source
11

Vous devez utiliser à la <span>place de <div>pour une manière correcte de inline . parce que div est un élément de niveau bloc et que vous avez besoin d'éléments de niveau bloc en ligne.

Voici le code html selon vos besoins: 

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

Vous avez deux façons de procéder

  • en utilisant simple display:inline-block;
  • ou en utilisant float:left;

vous devez donc changer la propriété d'affichage display:inline-block;avec force

Exemple un

div {
    display: inline-block;
}

Exemple deux 

div {
    float: left;
}

vous devez nettoyer le flotteur

.main-div:after {
    content: "";
    clear: both;
    display: table;
}
Hidayt Rahman
la source
7

Comme mentionné, display: inline est probablement ce que vous voulez. Certains navigateurs prennent également en charge les blocs en ligne.

http://www.quirksmode.org/css/display.html#inlineblock

Kevin
la source
3
@NexusRex il y a du travail pour que IE se comporte correctement, mais affichez: inline est la bonne réponse. Je crois que le travail à faire est le suivant: affichage: bloc en ligne; * affichage: en ligne; * zoom: 1; la définition du zoom force IE à traiter l'élément comme un élément de bloc.
Chris Stephens
7

Il suffit d'utiliser un div wrapper avec "float: left" et de mettre des boîtes à l'intérieur contenant également float: left:

CSS:

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

HTML:

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
A. Bender
la source
6

<span> ?

Pirat
la source
2
Je pense que nous parlons d'incruster des éléments de bloc qui peuvent avoir une largeur et une hauteur. Imaginez un div avec une image d'arrière-plan que vous souhaitez faire glisser en ligne avec du texte.
NexusRex
6

OK pour moi : 

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
flairon
la source
4

J'utiliserais des travées ou ferais flotter le div à gauche. Le seul problème avec flottant est que vous devez effacer le flotteur par la suite ou que le div contenant doit avoir le style de débordement réglé sur auto

Cam Tullos
la source
Je crois que nous parlons d'un div en ligne avec du texte ou autre, non flottant d'un côté.
NexusRex
Lorsque vous utilisez float: left, avec overflow: auto sur le div contenant, comment / quand la barre de défilement que le débordement pourrait entrer en jeu?
cellepo
3

Je sais que les gens disent que c'est une idée terrible, mais cela peut en pratique être utile si vous voulez faire quelque chose comme des images de tuiles avec des commentaires en dessous. Par exemple, Picasaweb l'utilise pour afficher les vignettes d'un album.
Voir par exemple / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (classe goog-inline-block; je l'abrège en ib ici)

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

Étant donné que CSS, définissez votre div sur la classe ib, et maintenant c'est magiquement un élément de bloc en ligne.

David Eison
la source
3

Vous devez contenir les trois divs. Voici un exemple:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

Remarque: les attributs border-radius sont facultatifs et ne fonctionnent que dans les navigateurs compatibles CSS3.

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

Notez que les divs 'foo' 'bar' et 'baz' sont chacun tenus dans le div 'contain'.

mot5150
la source
2 
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
Darryl Hein
la source
2

Je pense que vous pouvez utiliser cette méthode sans utiliser de CSS - 

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

En ce moment, vous utilisez l'élément de niveau bloc de cette façon, vous obtenez un résultat indésirable. Ainsi, vous pouvez vous en ligne élément comme span, small etc.

<span>foo</span><span>bar</span><span>baz</span>
Pankaj Bisht
la source
0

on peut faire ça comme

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
omnath
la source
0 
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

Ipog
la source
0 
<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */
Waah Ronald
la source
-1

J'ai juste tendance à leur faire des largeurs fixes afin qu'elles correspondent à la largeur totale de la page - ne fonctionne probablement que si vous utilisez une page à largeur fixe. Aussi "flotter".

NFPPW
la source