mercredi 18 mai 2016

How can i format formulary with CSS

I have a feedback form, and it happens that in the final phase the same, it is just composed by radios and checkboxes.

It is a goal to me get to align these components, or be to get to leave these radios and these checkboxes, like this:

enter image description here

I tried besides to consult several posts of the stackoverflow, I tried for me same to do searches and investigations, but without solution to solve the problem.

<div class="row" style="height:50px; width:500px">
  <div class="col-md-3" style="width:840px;">

    <div class="example">
      <div>
        <input id="radio1" type="radio" name="radio" id="shortdistances" value="shortdistances">
        <label for="radio1">Eu não posso andar longas distâncias, no entanto curtas distâncias e escadas não são problema.</label>
      </div>

      <div>
        <input id="radio2" type="radio" name="radio" id="shortorlongdistances" value="shortorlongdistances" style="vertical-align:inherit">
        <label for="radio2">Eu posso andar longas ou curtas distâncias, mas tenho dificuldades com escadas. Ao mesmo tempo durante o Embarque/Desembarque</label>
      </div>

      <div>
        <input id="radio3" type="radio" name="radio" value="cannotwalk" style="align-content:left;">
        <label for="radio3">Eu não posso andar</label>
      </div>
    </div>



    <div class="example">
      <div>
        <input id="checkbox1" type="checkbox" value="cgvd">
        <label for="checkbox1">Eu sou sego, ou tenho deficiência visual severa</label>
      </div>
      <div>
        <input id="checkbox2" type="checkbox" value="srds">
        <label for="checkbox2">Eu sou surdo, ou tenho deficiência auditiva severa</label>
      </div>
    </div>

    <div class="example">
      <div>
        <input id="radiobutton1" type="radio" name="radioc" id="needdog" value="shortdistances" style="vertical-align:inherit">
        <label for="radiobutton1"></label>
      </div>
      <div>
        <input id="radiobutton2" type="radio" name="radioc" id="needdogpsicol" value="shortdistances" style="vertical-align:inherit">
        <label for="radiobutton2">Eu preciso viajar na companhia de um cachorro devido a razões psicológicas</label>
      </div>
      <div>
        <input id="radiobutton2" type="radio" name="radioc" id="needdogpsicol" value="shortdistances" style="vertical-align:inherit">
        <label for="radiobutton2">Something similar ...</label>
      </div>
    </div>

  </div>
</div>

Will it be that anybody gets to help me with a concrete example?




Aucun commentaire:

Enregistrer un commentaire