Align Label with text

Navigation
1

I would like to align this div side by side Getting checkbox - day_day 

<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>
    
asked by anonymous 15.10.2017 / 21:30

2 answers

2

Put all elements in a single div and use a display: flex and a flex-wrap: wrap, the latter for the sake of responsiveness, justify-content: space between serves to give equal space between elements. p> 

.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>
    
15.10.2017 / 21:41
0

In addition to the divs, so the text is also aligned vertically with the input checkbox, it's one more detail. 

.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>
    
15.10.2017 / 23:02
How do I vector product by matrix and between matrices? Typescript conditions