Come si fa a visualizzare gli elementi div in linea?

254

Dato questo HTML:

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

Come li fai visualizzare in linea in questo modo:

foo bar baz

non così:

foo
bar
baz

css line html

— Steve
fonte

268

Questo è qualcos'altro quindi:

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

Espandi frammento

— Darryl Hein
fonte

in realtà questo è stato l'unico modo in cui ho trovato per visualizzare correttamente inline, non so perché la soluzione no-float non funzionasse ....

— Necronet

23

I nomi delle classi css qui non devono essere usati come esempio. Usa nomi semantici appropriati come: css-tricks.com/semantic-class-names

— Berik

261

Un div inline è un maniaco del web e dovrebbe essere battuto fino a quando non diventa un arco (almeno 9 volte su 10) ...

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

... risponde alla domanda originale ...

— bochgoch
fonte

11

Ci sono momenti in cui si desidera che i div vengano visualizzati in linea, ad esempio, quando si desidera aggiungere un margine a sinistra e a destra di un elemento. Non penso che si possa fare in un arco di tempo. Steve dovrebbe probabilmente usare float invece di inline.

— Darryl Hein,

8

imbottitura sì, non margine

— Andreas Wong

8

Sfortunatamente, HTML5 non supporta l'inserimento di un div all'interno di un <span>. Usavo <span> s per mettere gli stili CSS in una sezione e non fare in modo che il browser interpretasse la sezione come un blocco e imponesse il suo layout di blocco su di me. Ma ho appena scoperto oggi mentre eseguivo il porting della mia pagina su JQuery Mobile + HTML5 che se hai un <div> all'interno di un <span> il validatore HTML5 si lamenterà che non è HTML5 valido quindi ci sono casi in cui l'utilizzo del tag <span> invece di un <div> inline non è fattibile, almeno con HTML5.

— Kmeixner,

4

A volte anche se vivi in un mondo che non hai creato e l'unica cosa che puoi cambiare nel CSS. In tal caso style = "display: inline" funziona bene.

— Matthew Lock,

3

Se non sei "bloccato" con l'uso di div questa è una buona risposta. Ma potrebbero esserci molte ragioni per cui devi usare div ma hai bisogno che appaiano come elementi incorporati.

— Bobble

174

Prova a scriverlo in questo modo:

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

Espandi frammento

— Randy Sugianto 'Yuku'
fonte

16

Questa è la risposta corretta alla domanda, ma considerando la risposta accettata, sospetto che la domanda non riguardi lo scenario reale.

— Steve Perks,

34

Dopo aver letto questa domanda e le risposte un paio di volte, tutto quello che posso fare è supporre che ci sia stato un bel po 'di modifica in corso, e il mio sospetto è che ti sia stata data la risposta errata sulla base del non fornire abbastanza informazioni. Il mio indizio viene dall'uso del brtag.

Scuse a Darryl. Ho letto class = "inline" come style = "display: inline". Hai la risposta giusta, anche se usi nomi di classe semanticamente discutibili ;-)

L'uso sfavorevole di brfornire un layout strutturale piuttosto che un layout testuale è decisamente troppo diffuso per i miei gusti.

Se vuoi mettere più di elementi incorporati all'interno di questi, divsallora dovresti fluttuare quelli divpiuttosto che renderli in linea.

Div galleggianti:

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

Div in linea:

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

Se cerchi il primo, questa è la tua soluzione e perdi quei brtag:

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

nota che la larghezza di questi div è fluida, quindi sentiti libero di metterli su se vuoi controllare il comportamento.

Grazie Steve

— Steve Perks
fonte

24

Utilizzare display:inline-blockcon un margine e una query multimediale per 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
fonte

11

Dovresti usare <span>invece che <div>per il modo corretto di inline . perché div è un elemento a livello di blocco e il requisito è per gli elementi a livello di blocco inline.

Ecco il codice html secondo le vostre esigenze:

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

Hai due modi per farlo

usando semplice display:inline-block;
o usando float:left;

quindi devi cambiare la proprietà di visualizzazione display:inline-block;con forza

Esempio uno

div {
    display: inline-block;
}

Esempio due

div {
    float: left;
}

devi cancellare il galleggiante

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

— Hidayt Rahman
fonte

7

Come detto, display: inline è probabilmente quello che vuoi. Alcuni browser supportano anche i blocchi in linea.

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

— Kevin
fonte

3

@NexusRex ci sono soluzioni per far sì che IE si comporti correttamente, tuttavia visualizza: inline è la risposta corretta. Credo che il problema sia: display: inline-block; * display: in linea; * zoom: 1; l'impostazione dello zoom forza IE a trattare l'elemento come un elemento a blocchi.

— Chris Stephens,

7

Basta usare un div wrapper con "float: left" e mettere dentro le scatole contenenti anche 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
fonte

6

<span> ?

— Pirat
fonte

2

Penso che stiamo parlando di elementi di blocco in linea che possono avere larghezza e altezza. Immagina un div con un'immagine di sfondo che desideri scorrere in linea con il testo.

— NexusRex,

6

Ok per me :

<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
fonte

4

Vorrei usare span o float il div sinistro. L'unico problema con il floating è che devi cancellare il float in seguito o il div contenente deve avere lo stile di overflow impostato su auto

— Cam Tullos
fonte

Credo che stiamo parlando di un div in linea con il testo o altro, non fluttuato da un lato.

— NexusRex,

Quando si utilizza float: left, con overflow: auto sul div contenente, come / quando potrebbe entrare in gioco la barra di scorrimento che lo overflow?

— cellepo,

3

So che la gente dice che questa è un'idea terribile, ma in pratica può essere utile se vuoi fare qualcosa come immagini di piastrelle con commenti sottostanti. ad es. Picasaweb lo utilizza per visualizzare le anteprime in un album.
Vedi ad esempio / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (blocco goog-inline di classe; lo abbrevia in ib qui)

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

Dato quel CSS, imposta il tuo div in classe ib, e ora è magicamente un elemento di blocco in linea.

— David Eison
fonte

3

Devi contenere i tre div. Ecco un esempio:

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

Nota: gli attributi border-radius sono opzionali e funzionano solo nei browser conformi a CSS3.

HTML

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

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

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

Notare che i div 'foo' 'bar' e 'baz' si trovano all'interno del div 'contenere'.

— word5150
fonte

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
fonte

2

Penso che puoi usare in questo modo senza usare alcun css -

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

In questo momento stai usando un elemento a livello di blocco in questo modo stai ottenendo risultati indesiderati. Quindi puoi incorporare elementi come span, small ecc.

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

— Pankaj Bisht
fonte

0

possiamo farlo così

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

— Omnath
fonte

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
fonte

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
fonte

-1

Tendo solo a renderle larghezze fisse in modo che si sommino alla larghezza totale della pagina - probabilmente funziona solo se stai usando una pagina a larghezza fissa. Anche "float".

— NFPPW
fonte