0

Eu tenho um codigo e preciso organizar uma parte dele, porem nao consigo. Preciso inserir um espaço entre alguns input, porem nao sei como faze isso.

<tr>
            <td colspan="2">
                <div id=input-atendimento>
                Emergencia<input type="radio" name="atendimento" value="emergencia">
                Urgente<input type="radio" name="atendimento" value="urgente">
                Pouco Urgente<input type="radio" name="atendimento" value="pouco_urgente" checked="checked">
                Não Urgente<input type="radio" name="atendimento"value="nao_urgente">
                </div>
            </td>
        </tr>

inserir a descrição da imagem aqui

gostaria de saber como adicionar um espeço entre eles

1
  • 2
    Tenta no seu CSS: #input-atendimento input{ margin-right: 20px; }
    – Sam
    Commented 30/08/2018 às 23:22

2 Respostas 2

1

Além de dar o espaço que deseja, eu iria um pouco além para melhorar o código. Em vez de restringir o click apenas no radio, você pode ampliar para o texto que se refere a ele.

Por exemplo, clicar no texto "Emergência" e marcar o seu radio. Apesar de aumentar um pouco o código, melhora e muito a experiência do usuário, principalmente em dispositivos móveis que diminuem o tamanho da tela, e o usuário não precisa clicar exatamente no espacinho do radio, pois clicando no seu texto já o marca.

Para isso inclua cada texto referente ao radio em um label, e coloque um id nos inputs e um for em cada label apontando para o respectivo id:

<label for="_emergencia">Emergencia</label>
<input id="_emergencia" type="radio" name="atendimento" value="emergencia">

<label for="_urgente">Urgente</label>
<input id="_urgente" type="radio" name="atendimento" value="urgente">

<label for="_pouco_urgente">Pouco Urgente</label>
<input id="_pouco_urgente" type="radio" name="atendimento" value="pouco_urgente" checked="checked">

<label for="_nao_urgente">Não Urgente</label>
<input id="_nao_urgente" type="radio" name="atendimento"value="nao_urgente">

Coloquei um _ antes de cada id para previnir possíveis conflitos com outras ids que possam existir na página.

A questão da margem você pode primeiramente retirar a margem padrão do radio e setar uma margem do radio para o texto à direita (20px), e usar vertical-align: middle; no label e no input para alinhá-los ao meio um com o outro.

#input-atendimento label,
#input-atendimento input{
   vertical-align: middle;
   margin: 0;
}

#input-atendimento input{
   margin-right: 20px;
}

Exemplo:

#input-atendimento label,
#input-atendimento input{
   vertical-align: middle;
   margin: 0;
}

#input-atendimento input{
   margin-right: 20px;
}

table {
   border: 1px solid;
}
Clique no texto em vez de clicar diretamente no radio:
<table>
   <tr>
      <td colspan="2">
         <div id=input-atendimento>
            <label for="_emergencia">Emergencia</label>
            <input id="_emergencia" type="radio" name="atendimento" value="emergencia">
            
            <label for="_urgente">Urgente</label>
            <input id="_urgente" type="radio" name="atendimento" value="urgente">
            
            <label for="_pouco_urgente">Pouco Urgente</label>
            <input id="_pouco_urgente" type="radio" name="atendimento" value="pouco_urgente" checked="checked">
            
            <label for="_nao_urgente">Não Urgente</label>
            <input id="_nao_urgente" type="radio" name="atendimento" value="nao_urgente">
         </div>
      </td>
   </tr>
</table>

2
  • obrigado me ajudou muito Commented 31/08/2018 às 2:47
  • De nada amigo! Saiba como agradecer também neste link
    – Sam
    Commented 31/08/2018 às 2:49
1

Veja o exemplo com margin-right em todos os itens menos para o último pq não há outro elemento a direita.

table {
  border: 1px solid;
}
[type="radio"]:not(:last-of-type) { 
  margin-right: 20px;
}
<table>
    <tr>
        <td colspan="2">
            <div id=input-atendimento>
            Emergencia<input type="radio" name="atendimento" value="emergencia">
            Urgente<input type="radio" name="atendimento" value="urgente">
            Pouco Urgente<input type="radio" name="atendimento" value="pouco_urgente" checked="checked">
            Não Urgente<input type="radio" name="atendimento"value="nao_urgente">
            </div>
        </td>
    </tr>
</table>

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 .