Foundation: Wie bekomme ich Labels neben Checkboxen? - zurb-foundation

Als Experiment für Erfahrung und was nicht, versuche ich meine Bootstrap-Website zu Foundation zu konvertieren.

Ich kann nicht sehen, wie man Checkbox-Labels auf der rechten Seite des Kontrollkästchens erhält.

Bildschirmfoto

Bildbeschreibung hier eingeben

Code

    <!-- Registration Form -->
<div class="row">
<div class="containerReg">
<div class="twelve columns">
<div class="six columns">
<div class="reglayer">
<div class="twelve columns">
<!-- Registration Form -->
<h6>Chat now, it"s free! </h6>
<form action="client/index" method="post" target="_blank">
<div class="row">
<div class="three mobile-one columns">
<label class="right inline">Nickname:</label>
</div>
<div class="nine mobile-four columns">
<input name="nickname" type="text" />
</div>
</div>
<div class="row">
<div class="three mobile-one columns">
<label class="right inline">Gender:</label>
</div>
<div class="nine mobile-four columns">
<input type="checkbox" name="gender" value="Female" id="Female"><label for="Female">Female</label>
<input type="checkbox" name="gender" value="Male" id="Male"><label for="Male">Male</label>
</div>
</div>
<div class="row">
<div class="three mobile-one columns">
<label class="right inline">Room:</label>
</div>
<div class="nine mobile-four columns">
<input type="checkbox" name="channel" value="channel1" id="channel1"><label for="channel1">channel1</label>
<input type="checkbox" name="channel" value="channel2" id="channel2"><label for="channel2">channel2</label>
</div>
</div>
<p class="terms"> I am 18 years of age or older and have read and agree to obide by the Terms and Conditions</p>
</form>
<!-- Submit Button -->
<div class="row">
<div class="eleven columns centered"><a href="#" class="radius button">Connect to chat</a></div>
</div>
</div>
</div>
</div>

<!-- Spacer Columns -->
<div class="five columns"></div>

</div>
</div>
</div>

Frage

Wie kann ich es bekommen, dass:

Gender-Zeile ist wie folgt:

[] Female    [] Male

(Abstand zur obigen Texteingabe)

und

Die Zimmerzeile ist wie folgt:

[] channel1
[] channel 2

Antworten:

0 für die Antwort № 1

Versuchen Sie, die Eingabe innerhalb des Labels selbst hinzuzufügen

<label for="channel1"><input type="checkbox" name="channel" value="channel1" id="channel1">channel1</label>

Am beliebtesten