¿Hay alguna forma de evitar un salto de línea después de un div con css?
Por ejemplo tengo
<div class="label">My Label:</div>
<div class="text">My text</div>
y quiero que se muestre como:
Mi etiqueta: Mi texto
Respuestas:
display:inline;
O
float:left;
O
display:inline-block;
- Puede que no funcione en todos los navegadores.
¿Cuál es el propósito de usar un div
aquí? Sugeriría a span
, ya que es un elemento de nivel en línea, mientras que a div
es un elemento de nivel de bloque.
Tenga en cuenta que cada opción anterior funcionará de manera diferente.
display:inline;
convertirá el div
en el equivalente de a span
. Será afectado por margin-top
, margin-bottom
, padding-top
, padding-bottom
, height
, etc.
float:left;
mantiene el div
como un elemento a nivel de bloque. Todavía ocupará espacio como si fuera un bloque, sin embargo, el ancho se ajustará al contenido (asumiendo width:auto;
). Puede requerir clear:left;
ciertos efectos.
display:inline-block;
es la opción "lo mejor de ambos mundos". Se div
trata como un elemento de bloque. Responde a todos los margin
, padding
y height
las reglas como se esperaba para un elemento de bloque. Sin embargo, se trata como un elemento en línea con el fin de colocarlo dentro de otros elementos.
Lea esto para obtener más información.
Los div
elementos son elementos de bloque, por lo que por defecto ocupan todo el ancho disponible.
Una forma es convertirlos en elementos en línea:
.label, .text { display: inline; }
Esto tendrá el mismo efecto que usar span
elementos en lugar de div
elementos.
Otra forma es hacer flotar los elementos:
.label, .text { float: left; }
Esto cambiará la forma en que se decide el ancho de los elementos, por lo que solo será tan ancho como su contenido. También hará que los elementos floten uno al lado del otro, de manera similar a como las imágenes fluyen una al lado de la otra.
También puede considerar cambiar los elementos. El div
elemento está destinado a divisiones de documentos, normalmente uso label
un span
elemento y un para una construcción como esta:
<label>My Label:</label>
<span>My text</span>
Los div se utilizan para dar estructura a un sitio web o para contener una gran cantidad de texto o elementos, pero parece que los usa como etiqueta, debe usar span, colocará ambos textos uno al lado del otro automáticamente y no necesitará escribir css para ello.
E incluso si otras personas le dicen que flote los elementos, es mejor que cambie las etiquetas.
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Intente aplicar el clear:none
atributo css a la etiqueta.
.label {
clear:none;
}
div
todavía tiene el valor predeterminado width:auto
que hace que ocupe todo el ancho disponible.
Muchas veces he logrado obtener div sin saltos de línea después de ellos, jugando con el atributo float css y el atributo width css.
Por supuesto, después de resolver la solución, debe probarla en todos los navegadores, y en cada navegador debe cambiar el tamaño de las ventanas para asegurarse de que funcione en todas las circunstancias.