Wie formatiere ich formulary mit CSS

Question

Ich habe ein Feedback-Formular, und es passiert, dass in der Endphase das gleiche, es ist nur von Radios und Checkboxen zusammengesetzt.

Es ist ein Ziel, mir diese Komponenten auszurichten erhalten oder erhalten werden, um diese Radios und diese Kontrollkästchen zu verlassen, wie folgt aus:

ich neben versuchte mehrere Beiträge der Stackoverflow zu konsultieren Ich habe für mich versucht, Recherchen und Untersuchungen durchzuführen, aber ohne Lösung, um das Problem zu lösen.

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

Wird es sein, dass jemand mich mit einem konkreten Beispiel helfen wird?

Answer 1

Sie können sie vorgeben, Tabellenzellen zu sein. Auf diese Weise sind sie gut ausgerichtet. Ihr HTML wird im folgenden Beispiel nicht geändert. Ich habe gerade das CSS hinzugefügt.

.example div { 
 
    display: table-row; 
 
} 
 
/* input and label always nicely next to each other, takes care of wrapping. */ 
 
input, label { 
 
    display: table-cell; 
 
} 
 
/* Any additional space between input and label, if you like. */ 
 
label { 
 
    padding-left: 10px; 
 
} 
 

 
/* Spacing and line between the groups */ 
 
.example { 
 
    padding: 15px 0; 
 
    border-bottom: 1px solid #ccc; 
 
}

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