How do I make spaces between Tag Input

0

I have a code and need to organize a part of it, but I can not. I need to insert a space between some input, but I do not know how to do it.

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

I would like to know how to add a space between them

    
asked by anonymous 31.08.2018 / 01:19

2 answers

1

In addition to giving you the space you want, I'd go a little further to improve the code. Instead of restricting the click only on radio , you can zoom in on the text that refers to it.

For example, click on the text "Emergency" and mark your radio . Although it slightly increases the code, it improves and much the user experience, especially in mobile devices that decrease the size of the screen, and the user does not need to click exactly in the space of the radio, because clicking on your text already marks it. p>

To do this, include each text referring to radio in a label , and place a id in input if a for in each label pointing to its 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">

I put _ before every id to prevent possible conflicts with other id s that might exist on the page.

The margin question you can first remove the default margin from radio and set a margin from radio to the text on the right ( 20px ), and use vertical-align: middle; on label and input to align them in half with each other.

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

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

Example:

#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>
    
31.08.2018 / 02:15
1

See the example with margin-right on all items less for the last one because there is no other element on the right.

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>
    
31.08.2018 / 01:27