css - significado - span html para que sirve

Lista de definiciones con pares en línea

Question

Estoy tratando de crear una lista de definiciones de pares de términos de definición, cada par existente en una sola línea separada. He intentado hacer que dt sy dd s display:inline , pero luego pierdo los saltos de línea entre los pares. ¿Cómo me aseguro de tener una línea para cada par (y no para cada término / definición individual)?

Ejemplo:

<dl>
<dt>Term 1</dt><dd>Def 1</dd>
<dt>Term 2</dt><dd>Def 2</dd>
</dl>

flexible:

Term 1 Def 1
Term 2 Def 2

El CSS para hacerlos en línea sería:

dt,dd{display:inline;}

flexible:

Term 1 Def 1 Term 2 Def 2

... que no es lo que quiero (faltan saltos de línea entre pares).

Answer 1

Intenté estas respuestas, finalmente termino con this .

Que he simplificado a:

  dl {    
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;    
  }
  dt:after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;        
  }

Answer 2

La respuesta de Andrey Fedoseev no funciona en Android antiguo (navegador de valores 4.3).

Esto funciona para ese navegador y todos los demás que he comprobado:

dt::before {
  content: "/A";
  white-space: pre-wrap;
  display: block;
  height: .5em;
}

dt, dd {
  display: inline;
  margin: 0;
}

<dl>
  <dt>AM</dt>
  <dd>Description for am that should span more than one line at narrow screen widths.</dd>
  <dt>PM</dt>
  <dd>this means afternoon.</dd>
</dl>

Answer 3

Otra solución es usar bloques en línea y anchos porcentuales. Siempre que el ancho combinado de dd + dt sea superior al 50%.

dt, dd {
  display: inline-block;
}

dt {
  width: 50%;
}

dd {
  min-width: 5%;
}

Encontré que esto me dio un posicionamiento más consistente de los elementos dd.

Answer 4

Otra solución simple

dt {
    display: block;
    float: left;
    min-width: 100px;
}

https://jsbin.com/vumeyowana/edit?html,css,output

Answer 5

Otra solución:

dt:before {
  content: "";
  display: block;
}
dt, dd {
  display: inline;
}

Answer 6

Prueba esto:

dt, dd { float: left }
dt { clear:both }

Agregue margen inferior a dt dd si desea más espacio entre ellos.

Answer 7

Si tiene un backgronund o borde "cebra" que separa cada par DT-DD, esto funcionará bien:

dt, dd { padding: 8px 6px; display: block;

}
dt {
    font-weight: 600;
    float: left;
    min-width: 50%;
    margin: 0 8px 0 0;
}
dd:nth-of-type(odd) {
    background: #eee;
}

Esto aparecerá para envolver ambos elementos en una fila con un fondo gris. Siempre que el DT tenga menos altura vertical que el DD, que suele ser el caso.

• Todavía no se ha probado el navegador.