¿Cómo hacer que los elementos div se muestren en línea?

254

Dado este HTML:

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

¿Cómo hacer que se muestren en línea de esta manera:

foo bar baz

así no:

foo
bar
baz

css line html Steve
fuente

268

Eso es algo más entonces:

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

Expandir fragmento

Darryl Hein
fuente

En realidad esta era la única manera que encontré para mostrar correctamente en línea, no sé por qué la solución no flotación no funcionaba ....

Necronet

23

Los nombres de clase css aquí no deben usarse como ejemplo. Utilice nombres semánticos adecuados como: css-tricks.com/semantic-class-names

Berik

261

Un div en línea es un fenómeno de la red y debe ser golpeado hasta que se convierta en un lapso (al menos 9 de cada 10) ...

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

... responde la pregunta original ...

Bochgoch
fuente

11

Hay momentos en que desea que los divs se muestren en línea, por ejemplo, cuando desea agregar un margen a la izquierda y a la derecha de un elemento. No creo que se pueda hacer con un lapso. Sin embargo, Steve probablemente debería estar usando flotante en lugar de en línea.

Darryl Hein

8

relleno sí, no margen

Andreas Wong

8

Desafortunadamente, HTML5 no admite poner un div dentro de un <span>. Solía usar <span> s para poner estilos CSS en una sección y no hacer que el navegador interpretara la sección como un bloque y me impusiera su diseño de bloque. Pero acabo de descubrir hoy al portar mi página a JQuery Mobile + HTML5 que si tiene un <div> dentro de un <span> el validador HTML5 se quejará de que es HTML5 no válido, por lo que hay casos en los que se usa la etiqueta <span> en lugar de un <div> en línea no es factible, al menos con HTML5.

Kmeixner

44

A veces, aunque vives en un mundo que no creaste y lo único que puedes cambiar en el CSS. En ese caso, style = "display: inline" funciona bien.

Matthew Lock

3

Si no está 'atascado' con el uso de divs, esta es una buena respuesta. Pero puede haber muchas razones por las que necesita usar divs pero necesita que aparezcan como elementos en línea.

Bobble

174

Intenta escribirlo así:

div { border: 1px solid #CCC; }

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

Expandir fragmento

Randy Sugianto 'Yuku'
fuente

16

Esta es la respuesta correcta a la pregunta, pero teniendo en cuenta la respuesta aceptada, sospecho que la pregunta no aborda el escenario real.

Steve Perks

34

Después de leer esta pregunta y las respuestas un par de veces, todo lo que puedo hacer es suponer que ha habido un poco de edición en curso, y sospecho que se le ha dado una respuesta incorrecta por no proporcionar suficiente información. Mi pista proviene del uso de la bretiqueta.

Disculpas a Darryl. Leí class = "inline" como style = "display: inline". Tiene la respuesta correcta, incluso si usa nombres de clase semánticamente cuestionables ;-)

El uso erróneo de brproporcionar un diseño estructural en lugar de un diseño textual es demasiado frecuente para mi gusto.

Si desea poner más elementos en línea dentro de ellos, divsentonces debería flotar esos divs en lugar de hacerlos en línea.

Divs flotantes:

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

Divs en línea:

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

Si buscas lo primero, entonces esta es tu solución y pierdes esas bretiquetas:

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

tenga en cuenta que el ancho de estos divs es fluido, así que siéntase libre de ponerles anchos si desea controlar el comportamiento.

Gracias Steve

Steve Perks
fuente

24

Usar display:inline-blockcon una consulta de margen y medios para 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
fuente

11

Debe usar en <span>lugar de <div>para la forma correcta de en línea . porque div es un elemento de nivel de bloque, y su requisito es para elementos de nivel de bloque en línea.

Aquí hay un código html según sus requisitos:

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

Tienes dos maneras de hacer esto

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

así que tienes que cambiar la propiedad de visualización con display:inline-block;fuerza

Ejemplo uno

div {
    display: inline-block;
}

Ejemplo dos

div {
    float: left;
}

necesitas limpiar el flotador

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

Hidayt Rahman
fuente

7

Como se mencionó, display: inline es probablemente lo que quieres. Algunos navegadores también admiten bloques en línea.

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

Kevin
fuente

3

@NexusRex hay una solución para que IE se comporte correctamente, sin embargo, se muestra: en línea es la respuesta correcta. Creo que la solución es: display: bloque en línea; * pantalla: en línea; * zoom: 1; establecer el zoom obliga a IE a tratar el elemento como un elemento de bloque.

Chris Stephens

7

Simplemente use un contenedor wrap div con "float: left" y ponga cajas dentro que también contengan 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
fuente

6

<span> ?

Pirat
fuente

2

Creo que estamos hablando de elementos de bloque en línea que pueden tener ancho y alto. Imagine un div con una imagen de fondo que desee que fluya en línea con el texto.

NexusRex

6

esta bien para mi :

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

4

Usaría tramos o flotaría el div a la izquierda. El único problema con la flotación es que debe borrar la flotación después o el div que contiene debe tener el estilo de desbordamiento configurado en auto

Cam Tullos
fuente

Creo que estamos hablando de un div en línea con texto u otro, no flotando a un lado.

NexusRex

Al usar float: left, con overflow: auto en el div que contiene, ¿cómo / cuándo entraría en juego la barra de desplazamiento para que el desbordamiento?

cellepo

3

Sé que la gente dice que esta es una idea terrible, pero en la práctica puede ser útil si quieres hacer algo como imágenes en mosaico con comentarios debajo de ellas. por ejemplo, Picasaweb lo usa para mostrar las miniaturas en un álbum.
Consulte, por ejemplo, / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (clase goog-inline-block; lo abrevio a ib aquí)

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

Dado ese CSS, configure su div en clase ib, y ahora es mágicamente un elemento de bloque en línea.

David Eison
fuente

3

Necesitas contener los tres divs. Aquí hay un ejemplo:

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: los atributos border-radius son opcionales y solo funcionan en navegadores compatibles con CSS3.

HTML

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

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

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

Tenga en cuenta que los divs 'foo' 'bar' y 'baz' se mantienen dentro del div 'contiene'.

word5150
fuente

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
fuente

2

Creo que puedes usarlo de esta manera sin usar ningún CSS -

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

En este momento está utilizando el elemento de nivel de bloque de esa manera está obteniendo resultados no deseados. Entonces, ¿puede alinear elementos como span, small, etc.

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

Pankaj Bisht
fuente

0

podemos hacer esto como

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

omnath
fuente

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
fuente

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
fuente

-1

Solo tiendo a hacerlos anchos fijos para que se sumen al ancho total de la página, probablemente solo funcione si está utilizando una página de ancho fijo. También "flotador".

NFPPW
fuente

¿Cómo hacer que los elementos div se muestren en línea?

Respuestas:

Tienes dos maneras de hacer esto