Align Label with Text

Asked

Viewed 250 times

1

I’d like to line this div up next to each other Getting checkbox - day of the week

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

2 answers

2


Place all elements in a single div and use a display: flex and flex-wrap: wrap, the latter for responsiveness, the Justify-content: space between serves to give an equal space between elements.

.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

In addition to the Divs, this way the text is also aligned vertically with the input checkbox, it is a detail more.

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

Browser other questions tagged css

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