1

Gostaria de alinhar esta div uma ao lado da outra Ficando checkbox - dia_da_semana

<div class="dia"><input id="1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia"><input id="2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia"><input id="3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia"><input id="4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia"><input id="5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia"><input id="6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia"><input id="0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div>

2 Respostas 2

2

Coloque todos os elementos numa única div e use um display: flex e um flex-wrap: wrap, este ultimo por questão de responsividade, o justify-content: space between serve para dar um espaço igual entre os elementos.

.linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
<div class="linha"><div class="dia"><input id="1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia"><input id="2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia"><input id="3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia"><input id="4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia"><input id="5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia"><input id="6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia"><input id="0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div></div>

0

Além das divs, dessa forma o texto também fica alinhado verticalmente com o input checkbox, é um detalhe a mais.

.linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div .dia {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}

div .dia input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<div class="linha"><div class="dia"><input id="1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia"><input id="2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia"><input id="3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia"><input id="4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia"><input id="5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia"><input id="6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia"><input id="0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div></div>

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 .