0

Bom dia a todos. Me perdoem se esta pergunta já foi feita aqui mas procurei e não achei nada semelhante. Estou montando uma pesquisa para ser utilizada em smartphones e tenho algumas opções ( input[type=radio] ) com labels extensos. Isso está quebrando as linhas de forma desagradável (imagem anexa). Alguém poderia me dar uma dica de como arrumar isso, ou seja, a linha debaixo ficar alinhada na coluna da primeira linha ? Segue o código HTML em anexo. Obrigado desde já.

<label>13. Qual &eacute; a categoria com maior dificuldade na compra ?</label>
<div>
	<input type='radio' name='ck_categoria' value='1' class='checkbox-template' style='' onclick=''>RA&Ccedil;&Otilde;ES
	<br>
	<input type='radio' name='ck_categoria' value='2' class='checkbox-template' style='' onclick=''>MEDICAMENTOS
	<br>
	<input type='radio' name='ck_categoria' value='3' class='checkbox-template' style='' onclick=''>BIOL&Oacute;GICOS
	<br>
	<input type='radio' name='ck_categoria' value='4' class='checkbox-template' style='' onclick=''>HIGIENE E BELEZA (COSM&Eacute;TICOS)
	<br>
	<input type='radio' name='ck_categoria' value='5' class='checkbox-template' style='' onclick=''>LIMPEZA (AREIA, TAPETE, FRALDA E DESINFETANTES)
	<br>
	<input type='radio' name='ck_categoria' value='6' class='checkbox-template' style='' onclick=''>ACESS&Oacute;RIOS
	<br>
	<input type='radio' name='ck_categoria' value='7' class='checkbox-template' style='' onclick=''>SNACKS
	<br>
	<input type='radio' name='ck_categoria' value='8' class='checkbox-template' style='' onclick=''>OUTROS (favor especificar)
	<br>
	<input type='text' disabled id='ck_categoria_outros' name='ck_categoria_outros' data-msg='' class='form-control' value='' maxlength='200'>
</div>

inserir a descrição da imagem aqui

1

1 Resposta 1

0

A forma como vc montou sua lista não está legal, além de não estar semântica.

Sugiro que use um UL/LI com display:flex assim vc consegue o que quer e deixa as coisas melhor formatadas no HTML, usando uma listagem e uma <label> para o <input>

ul {
  list-style: none;
  width: 200px;
}

li {
  display: flex;
}
<ul>
  <li>
    <input type="checkbox" id="n1">
    <label for="n1">label</label>
  </li>
  <li>
    <input type="checkbox" id="n2">
    <label for="n3">label muito muito muito muito longa</label>
  </li>
  <li>
    <input type="checkbox" id="n3">
    <label for="n3">label muito muito muito muito longa</label>
  </li>
</ul>

2
  • 1
    Obrigado. Ficou perfeito.
    – cfreitasc
    Commented 17/05/2019 às 11:20
  • @cfreitasc sem problemas 💪
    – hugocsl
    Commented 17/05/2019 às 11:21

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 .