Foundation：如何在复选框旁边获取标签？

Question

作为体验实验之类的，我正在尝试将我的 Bootstrap 网站转换为 Foundation。

我看不到如何获取复选框右侧的复选框标签。

截图

代码

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

问题

我怎样才能得到它：

性别行是这样的：

[] Female    [] Male

（与上面的文本输入正确间隔）

和

房间行是这样的：

[] channel1
[] channel 2

Answer 1

尝试在标签本身内添加输入

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