html - retorno - el salto de línea dentro de un elemento de lista genera espacio entre las líneas

salto de linea html5

Question

Quiero romper la línea <br/> dentro de un <li> como:

• Primera linea
  segunda linea
• Segundo li
• tercer li

pero al hacerlo (ambas etiquetas) - obtengo un espacio entre ellos. el margen y el relleno es 0, pero aún así lo consigo ... ¿Alguna idea de cómo deshacerme de él? ¡Gracias!

Answer 1

¿Podría esto funcionar para usted?

<ul>
    <li><div>First line</div> second line</li>
    <li>Second li</li>
    <li>third li</li>
</ul>

Answer 2

Como nota al margen de Wordpress,   y <br /> se eliminará automáticamente si está presente antes del cierre </li> .

De manera pirata, puede usar un separador de ancho cero ( ‌ ) o un separador invisible ( ⁣ ).

En el modo de texto, realice un retorno de carro e inserte un ‌ antes del cierre </li> .

Ejemplo:

<ul>
  <li>List item with a blank line below
  &zwnj;</li>
  <li>List item</li>
</ul>

Answer 3

Esta es una solución simple ...

al agregar un <br/><br/> en su <li> se agregará un salto de línea en blanco directamente debajo

<ul>
    <li>Line 1<br/><br/></li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4<br/><br/></li>
    <li>Line 5</li>
</ul>

Answer 4

Intenta jugar con "line-height".

Answer 5

Para futuras personas que terminen con esta pregunta como yo: agregando white-space: pre-wrap; a la <ul> funcionó para mí! También funciona con /n como un bono adicional :)

ul {
  white-space: pre-wrap;
}

Answer 6

Prueba esto

<ul>
    <li>First Line</br>First Second Line</li>
    <li>Second Line</li>
</ul>

Mira esto

Answer 7

Prueba esto;

/ * CSS * /

#keyskills:after {
content:"I.T. – data analytical, planning, design and interaction skills /A Data logging and reporting - averaging about 60 WPM /A Research skills, able to provide intermediate I.T. support ";
white-space: pre;

}

/ * Cuerpo de HTML * /

<p id="keyskills">

Answer 8

Puede alterar la propiedad de line-height en su css. Eso ayuda ?

Answer 9

Una mejora en la respuesta de Rudrik:

<UL>
   <LI>First Line
      <DD>Second Line</DD> <!-- No Space -->
   </LI>
   <LI>Third Line</LI>
   <LI>Fourth Line</LI>
</UL>

¡Palabra!

Answer 10

Usando CSS en línea, cree una división con una altura fija, pero sin contenido, para crear una línea vacía entre los elementos de la lista, al igual que con las listas anidadas. Si no sabe mucho sobre CSS, simplemente copie esta solución y edite la altura (en píxeles) para cambiar la altura de la línea vacía. Coloque una línea vacía con este código en cualquier lugar de las listas y establezca la altura que desee para cada línea vacía creada:

<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4
       <div style="height: 10px;">
       </div>
    </li>
    <li>Line 5</li>
</ul>

Answer 11

  <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>





  Coffee
    - black hot drink
  Milk
    - white cold drink 

Espero que esto pueda ayudar ...