CODEWITHSUNDEEP
htmlcssangulartypescript
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1626

How to align space between list elements

I want to get decrease line spacing between this list elements. I tried line-height:1.5em; but that didn't work. In the screenshot you can see how it looks and there's a bit more space than I want. How can I control it?

enter image description here

Here's what I tried 

<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>

Upvotes: 0

Views: 463

Answers (3)

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

Its seems to be li spacing is there so to decrease the space between then use

li { line-height:1rem;}

Or you can use li styling as 

<li style="line-height:1rem" > </li>

Upvotes: 0

Aravind
Aravind

Reputation: 41581

Add style to your li tag as below 

ul li {
  height: 30px;
}

Working Stackblitz

Upvotes: 1

TechNinja
TechNinja

Reputation: 1

Labels of fields should be in container , this can give you more control on them, then you can set uniform margin-right value to create appropriate spacing.

Upvotes: 0

Related Questions