¿Cómo hacer que los elementos div se muestren en línea?
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
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
no es así:
foo
bar
baz
Solución
Eso es otra cosa 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 -->
Otros consejos
Un div en línea es un fenómeno de la web & amp; 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 ...
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>
Después de leer esta pregunta y las respuestas un par de veces, todo lo que puedo hacer es suponer que se ha realizado un poco de edición, y sospecho que se le ha dado una respuesta incorrecta por no proporcionar suficiente información. Mi idea proviene del uso de la etiqueta br.
Disculpas a Darryl. Leí class = & Quot; en línea & Quot; como estilo = " display: inline " ;. Tiene la respuesta correcta, incluso si usa nombres de clase semánticamente cuestionables ;-)
El uso incorrecto de divs para proporcionar 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 esos div, entonces debería flotar esos <=> s en lugar de hacerlos en línea.
Divs flotantes:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Divs en línea:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Si buscas lo primero, entonces esta es tu solución y pierde esas <=> etiquetas:
<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 poner anchos si desea controlar el comportamiento.
Gracias Steve
Use display:inline-block con 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>
Debe usar
<span>en 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í está el código html según sus requisitos:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
Tienes dos formas de hacer esto
- usando simple
display:inline-block; - o usando
float:left;
por lo que debe cambiar la propiedad de visualización <=> con fuerza
Ejemplo uno
div {
display: inline-block;
}
Ejemplo dos
div {
float: left;
}
necesitas limpiar el flotador
.main-div:after {
content: "";
clear: both;
display: table;
}
Como se mencionó, display: inline es probablemente lo que quieres. Algunos navegadores también admiten bloques en línea.
Simplemente use un contenedor wrap div con " float: left " y poner cajas dentro que también contengan flotante: izquierda:
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>
ok, para mí:
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
<span>?
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 automático
Sé que la gente dice que 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. p.ej. Picasaweb lo usa para mostrar las miniaturas de un álbum.
Consulte, por ejemplo, / demo http: // encierro-biblioteca. googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (clase goog-inline-block; lo abrevío 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, establezca su div en clase ib, y ahora es mágicamente un elemento de bloque en línea.
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'.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
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>
podemos hacer esto como
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<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>
<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 */
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 & Quot; float & Quot ;.
