How to adjust span next to Labels?

Asked

Viewed 723 times

0

I’m wondering how to line up the spans beside the labels as an example:

inserir a descrição da imagem aqui

Mine is like this:

inserir a descrição da imagem aqui

Below is my html:

<!DOCTYPE html>
<html>

<body>
  <div class="outputs">
    <ul>
      <li>
        <span class="spans">Prog. Degelos</span>
        <label class="labels active">Ativo</label>
      </li>
      <li>
        <span class="spans">Saídas</span>
        <label class="labels active">
        Refrigeração
      </label>
        <label class="labels active">
        Defrost
      </label>
        <label class="labels deactivated">
        Fans
      </label>
      </li>
      <li>
        <span class="spans">SETPOINT</span>
        <label class="labels">-5<sup> °C</sup></label>
      </li>
      <li>
        <span class="spans">DIFERENCIAL</span>
        <label class="labels">3<sup> °C</sup></label>
      </li>
    </ul>
  </div>
</body>

</html>

html css

1 answer

0


By putting a minimum space in the titles you can make the alignment, an example would be to add this css:

.outputs ul li span.spans {
    display: inline-block;
    min-width: 200px;
    text-align: right;
}

  • and for span text to be on the right?

  • I added the right alignment, just insert text-align: right.

  • It worked, thank you!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.