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

Risposte:


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


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


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>


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


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>

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

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


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>

6

<span> ?


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>

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


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.


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


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>

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>

0

possiamo farlo così

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

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/


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

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.