¿Cómo evito que la etiqueta DIV comience una nueva línea?

89

Quiero enviar una sola línea de texto al navegador que contiene una etiqueta. Cuando se renderiza, parece que DIV genera una nueva línea. ¿Cómo puedo incluir el contenido en la etiqueta div en la misma línea? Aquí está mi código.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

He tratado de arreglarlo aquí. ¿Cómo puedo tener esta pantalla en una sola línea?

html css indefinido
fuente
Solo para señalar, no necesita los corchetes cuando usa echo. echo $id;es tan válido como echo($id);.
Eddie Hart

Respuestas:

142

La divetiqueta es un elemento de bloque que provoca ese comportamiento.

En su spanlugar, debería utilizar un elemento, que está en línea.

Si realmente desea usar div, agregue style="display: inline". (También puede poner eso en una regla CSS)

SLaks
fuente
13
Solo display: inlinecontradice para qué sirve el DIV, ¡así que no lo hagas! En su lugar, utilice el intervalo.
Robert K
28
Soy muy consciente de eso; por eso escribí if you really want to.
SLaks
22
Un div se define como una división de una página, antes de HTML5. No está definido con ninguna característica de presentación. En otras palabras, un div es semánticamente apropiado de acuerdo con su definición basada en el contenido y los elementos que contiene. Como resultado, está perfectamente bien configurar un div para mostrar: en línea y no violar ninguna semántica o definición estándar.
2
En mi caso, no pude usar span, porque quería definir una propiedad de ajuste de palabras de ruptura de palabras, y esas solo funcionan para elementos de tipo bloque. Pero no pude usar div, porque no quería una nueva línea. Entonces, en su lugar, usé display: inline-blocky un elemento div. Di lo que quieras sobre el estilo, pero esto resolvió ambos problemas.
jsarma
¡No funcionó para mí! Esperaba que expandiera la celda en la que se encuentra div, pero no se produjo ningún cambio
rezKesh
36

No soy un experto pero lo intento white-space:nowrap;

La propiedad de espacio en blanco es compatible con todos los navegadores principales.

Nota: El valor "inherit"no es compatible con IE7 y versiones anteriores. IE8 requiere un !DOCTYPE. Compatible con IE9 "inherit".

Shivanshu
fuente
Genial cuando necesita elementos de bloque en línea que no se envuelvan al final de la línea cuando tiene overflow: hiddenel elemento de ajuste y lo mueve de acuerdo con el padre "en el fondo" :)
jave.web
16

div es un elemento de bloque, que siempre ocupa su propia línea.

usa la spanetiqueta en su lugar

cobbal
fuente
10
Estás confundiendo presentación con función. Un div ocupa su propia línea porque se presenta como display: block por defecto y por ninguna otra razón.
1
¿Pero el intervalo también crea un salto de línea antes y después?
user3761308
6

Agregue style="display: inline"a su div.

Franz
fuente
5

use float: left en el div y el enlace, o use un intervalo.

Jimmeh
fuente
1

Utilice la propiedad css - white-space: nowrap;

Jithjob Ignatious
fuente
0

Una mejor manera de hacer una línea de ruptura es usando span con el parámetro de estilo CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Ejemplo directamente en su HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
Alex. Manfrin
fuente
-1 
<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>
dfilkovi
fuente
3
terrible idea de usar javascript + php, cuando puede estar bien con solo css.
ZurabWeb
@Piero ¿Por qué dices eso? Un backend es generalmente necesaria para una aplicación front-end
Curioso
3
@Curious cierto, pero el backend debería ocuparse de cosas de backend como cálculos y manejo de datos, mientras que el frontend debería dejarse para que los navegadores lo procesen. Esto reduce la carga del servidor y mejora la experiencia del usuario. Esto es en términos generales. En este caso particular, sin embargo, <a href="pagea.php?id=<?php echo $id; ?> "> Página A </a> sería suficientemente buena. Y con getData.php, ¿por qué tener php parse y generar javascript si esto puede ser manejado por apache? Así: src = "getData.js? Id = <? Php echo $ id;?>"
ZurabWeb
-2

Simplemente puede usar:

#contentInfo_new br {display:none;}
user3012794
fuente