¿Cómo evito los saltos de línea ANTES O DESPUÉS de un elemento?

Question

Tengo una lista de definiciones. Mi <dt> y <dd> se configuran en CSS como display: inline-block;. Y me gustaría evitar el salto de línea antes del elemento <dd> y después del elemento <dt>. ¿Cómo puedo hacerlo?

Mi lista tiene este aspecto, con un salto de línea después de término3:

término1: DEF1; term2: def2; term3:
def3;

quiero que se vea como este (el salto de línea debe aparecer antes término3:

término1: DEF1; término2: DEF2;
término3: DEF3;

Answer 1

La única manera de Se me ocurre hacer esto para establecer el ancho de cada uno de los elementos, de modo que haya un punto de interrupción predecible en cada línea.

Answer 2

Sola columna (HTML válido):

<style type="text/css"> 
    dt, dd { display: inline-block; float: left; } 
    dt { clear: left; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

n-Wrap <span> (HTML no válida):

<style type="text/css"> 
    dt, dd { display: inline-block; } 
    span { white-space: nowrap; } 
</style> 

<dl> 
    <span><dt>term1</dt><dd>def1</dd></span> 
    <span><dt>term2</dt><dd>def2</dd></span> 
    <span><dt>term3</dt><dd>def3</dd></span> 
</dl> 

Answer 3

Para mí funcionó con sólo especificar el dt y dd en la misma línea, junto con inline estilo de visualización, como este:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

en lugar de lo que tuve anteriormente:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1 
    <dd>def1 
    <dt>term2 
    <dd>def2 
    <dt>term3 
    <dd>def3 
</dl> 

parecen funcionar bien cuando el reajuste dinámico de la ventana del navegador - Nunca lo veo ruptura entre el dt y dd sólo entre dd y dt.