Come si fa a fare gli elementi div display inline?

Dato questo codice HTML:

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

Come si fa a fare la loro display inline come questo:

pippo pluto paperino

non come questo:

pippo
bar
baz

InformationsquelleAutor Steve | 2008-10-22

 

19 Replies
  1. 248

    Che è qualcosa d’altro allora:

    CSS:

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

    HTML:

    <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 era l’unico modo che ho trovato per display inline correttamente non so perché il no-float soluzione non ha funzionato….
    • La classe css nomi qui non deve essere usato come un esempio. L’uso corretto semantica denominazione del tipo: css-tricks.com/semantic-class-names
  2. 246

    Inline in un div è un freak di web & dovrebbe essere battuti fino a diventare una campata (almeno 9 volte su 10)…

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

    …risposte alla domanda originale…

    • Ci sono momenti in cui si desidera div per display inline, per esempio, quando si desidera aggiungere un margine a destra e a sinistra di un elemento. Non credo che può essere fatto con un arco. Steve, probabilmente, dovrebbe essere utilizzando float invece di inline però.
    • Non sono sicuro di seguire Darryl, è possibile aggiungere i margini o padding al span>> <span style=”color:white;background-color:black;margin:10px;padding:20px;”>xxxxx</span>
    • imbottitura sì, non margine
    • Che dire si voglia avere un div con l’immagine di sfondo di flusso in linea all’interno di un paragrafo di testo. Spesso è più opportuno utilizzare un div con bg immagine impostata tramite CSS piuttosto che utilizzare un tag img.
    • border:solid non funziona bene con campate. Se si desidera che due immagini, la visualizzazione sullo stesso livello e hanno un bordo questo non è adatto.
    • Purtroppo, HTML5 non supporta mettere un div all’interno di un <span>. Ho usato per usare <span>s mettere gli stili CSS in una sezione e non avere il browser di interpretare la sezione come un blocco e la forza il suo layout a blocco su di me. Ma ho scoperto solo oggi, mentre il porting mia pagina di JQuery Mobile+HTML5 che se si dispone di un <div> interno di un <span> HTML5 validatore si lamentano del fatto che non è valido HTML5, quindi ci sono casi in cui l’utilizzo dell’ <span> tag invece di un inline <div> non è fattibile, almeno con HTML5.
    • …in realtà non è rispondere alla domanda originale, che prevedeva “Dato questo codice HTML”.
    • A volte anche se si vive in un mondo che non è stato creato e l’unica cosa che si può modificare nel CSS. In questo caso style=”display: inline” funziona bene.
    • Se non si è ‘bloccato’ con l’utilizzo di tabelle, questa è una buona risposta. Ma ci possono essere molte ragioni per cui è necessario utilizzare i div, ma hanno bisogno di apparire come elementi inline.
    • “inline div è un freak di web & dovrebbe essere battuti fino a quando non diventa un arco” – perché?

  3. 167

    Prova a scrivere così:

    CSS:

    div { border: 1px solid #CCC; }

    HTML:

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

    • Questa è la risposta corretta alla domanda, ma considerando il accettato la risposta, ho il sospetto che la questione non è l’indirizzo reale scenario.
  4. 33

    Aver letto questa domanda e le risposte un paio di volte, tutto quello che posso fare è assumere che c’è stato un po ‘ di editing in corso, e il mio sospetto è che ti hanno dato la risposta sbagliata, sulla base di non fornire informazioni sufficienti. La mia idea nasce dall’uso di br tag.

    Scuse a Darryl. Ho letto class=”inline” come style=”display: inline”. Di avere la risposta giusta, anche se semanticamente discutibile nomi di classe 😉

    Miss uso di br per fornire layout strutturale piuttosto che testuale, il layout è troppo diffuso per i miei gusti.

    Se hai intenzione di inserire più elementi all’interno di quei divs allora si dovrebbe essere galleggianti quelli divs piuttosto che metterli in linea.

    Galleggiava div:

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

    Inline div:

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

    Se siete dopo la prima, allora questa è la tua soluzione e perdere quei br tag:

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

    si noti che la larghezza di questi div è fluido, quindi sentitevi liberi di mettere larghezze su di loro, se si desidera controllare il comportamento.

    Grazie,
    Steve

  5. 23

    Utilizzare display:inline-block con un margine di e media query 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>
  6. 11

    Si dovrebbe usare <span> invece di <div> per un corretto modo di
    inline. perché div è un elemento di livello, e il vostro requisito è per inline-block elementi di livello.

    Qui è il codice html per le vostre esigenze :

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

    Hai due modi per fare questo


    • utilizzando semplici display:inline-block;
    • o utilizzando float:left;

    modo che hai per cambiare proprietà di visualizzazione display:inline-block; con forza

    Esempio uno

    div {
        display: inline-block;
    }

    Esempio due

    div {
        float: left;
    }

    è necessario cancellare il galleggiante

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

    Come detto, display:inline è probabilmente ciò che si desidera. Alcuni browser supportano anche inline-block.

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

    • Non funziona in IE…
    • c’è lavoro in giro per ottenere IE per funzionare correttamente, tuttavia display:inline è la risposta corretta. Credo che il lavoro di tutto è: display: inline-block; *display: inline; *zoom: 1; impostazione di zoom forze di IE per trattare l’elemento come un elemento di blocco.
  8. 7

    Basta usare un div contenitore con “float: left” e mettere le scatole all’interno anche contenenti 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>
  9. 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>
    • thx per display: inline-block;
  10. 5

    <span> ?

    • Penso che stiamo parlando di un inline block elementi che possono avere larghezza e altezza. Immaginate un div con un immagine di sfondo che si desidera flusso in linea con il testo.
  11. 4

    Vorrei utilizzare intervalli o galleggiante il div di sinistra. L’unico problema con la variabile è che il galleggiante in seguito o contenenti div deve avere overflow stile impostato su auto

    • Credo che stiamo parlando di un div in linea con il testo o altri, non galleggiava su un lato.
    • Quando si utilizza float: left, con overflow: auto sul div che lo contiene, come/quando la barra di scorrimento che l’overflow potrebbe entrare in gioco?
  12. 3

    So che dicono che questa è una pessima idea, ma non può in pratica essere utile se si vuole fare qualcosa come piastrelle immagini con i commenti sotto di loro. ad esempio, Picasaweb utilizza per visualizzare le miniature in un album.

    Vedi per esempio/demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html ( classe goog-inline-block ; ho abbreviato, 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 che i CSS, impostare il div di classe ib, e ora è magicamente inline in un elemento di blocco.

    • Questo funziona bene nei nuovi browser diversi da IE, ma non IE6.
  13. 3

    È necessario contenere i tre div. Qui è 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: border-radius attributi sono opzionali e funzionano solo in CSS3 compatibile browser.

    HTML

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

    Nota che il div ‘pippo’, ‘pluto’ e ‘baz’ sono racchiusi all’interno di ‘contenere’ div.

  14. 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>
  15. 2

    Penso che si può utilizzare in questo modo senza l’utilizzo di alcun css –

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

    Adesso si sta utilizzando elemento di livello che modo hai trovato indesiderati risultato. Così si può elemento inline come durata, piccolo ecc.

    <span>foo</span><span>bar</span><span>baz</span>
  16. 0

    siamo in grado di fare questo come

    .left {
        float:left;
        margin:3px;
    }
    <div class="left">foo</div>
    <div class="left">bar</div>
    <div class="left">baz</div>
  17. 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 */
  18. -1

    Ho appena tendono a rendere le loro larghezze fisse in modo che si sommano al totale larghezza della pagina, probabilmente, funziona solo se si utilizza una larghezza fissa pagina. Anche “float”.

Lascia un commento