Quiero obtener disminuir el espacio entre líneas entre los elementos de esta lista. Intenté line-height:1.5em; pero eso no funcionó. En la captura de pantalla puedes ver cómo se ve y hay un poco más de espacio del que quiero. ¿Cómo puedo controlarlo?

enter image description here

Esto es lo que probé

<ul class="list-unstyled" style="line-height: 1.5em;">
    <li>
        <strong>
            <h4 for="">Car Detail:</h4>
        </strong>
    </li>
    <li>
        Engine:
        <mat-form-field>
            <input type="number" matInput placeholder="">
        </mat-form-field>
    </li>
    <li>
        Torque:
        <mat-form-field>
            <input type="number" matInput placeholder="">
        </mat-form-field>
    </li>
    <li>
        Top Speed:
        <mat-form-field>
            <input type="number" matInput placeholder="">
        </mat-form-field>
    </li>
    <li>
        Target Speed:
        <mat-form-field>
            <input type="number" matInput placeholder="">
        </mat-form-field>
    </li>
    <li>
        Total Cost:
        <mat-form-field>
            <input type="number" matInput placeholder="">
        </mat-form-field>
    </li>
</ul>
0
Timuçin Çiçek 30 sep. 2019 a las 21:16

3 respuestas

La mejor respuesta

Agregue estilo a su etiqueta li como se muestra a continuación

ul li {
  height: 30px;
}

Working Stackblitz

1
Aravind 30 sep. 2019 a las 18:24

Parece que hay poco espacio para disminuir el espacio entre el uso

li { line-height:1rem;}

O puedes usar li styling como

<li style="line-height:1rem" > </li>
0
Hitech Hitesh 30 sep. 2019 a las 18:55

Las etiquetas de los campos deben estar en el contenedor, esto puede darle más control sobre ellos, luego puede establecer un valor uniforme de margen derecho para crear el espaciado apropiado.

0
TechNinja 30 sep. 2019 a las 18:20