0

Estou com dúvida de como alinhar os spans ao lado dos labels conforme exemplo:

inserir a descrição da imagem aqui

O meu está assim:

inserir a descrição da imagem aqui

Segue abaixo o meu 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>

1 Resposta 1

0

Colocando um espaço mínimo nos títulos você pode fazer o alinhamento, um exemplo seria adicionar este css:

.outputs ul li span.spans {
    display: inline-block;
    min-width: 200px;
    text-align: right;
}
3
  • e para o texto span ficar na direita? Commented 29/05/2017 às 14:52
  • adicionei o alinhamento a direita, bastava apenas inserir text-align: right. Commented 29/05/2017 às 14:58
  • Deu certo, obrigado! Commented 29/05/2017 às 15:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .