vue遍历出来的复选框之间空位大是怎么回事

Question

遍历出来的复选框空位太大怎么回事

<tr>
                    <td rowspan="1">爱好：</td>
                    <td v-for="(item,index) in hobbyArray">
                        <input type="checkbox" v-bind:value="item" v-model="hobbies">
                        <label for="">{{item}}</label>
                    </td>
                </tr>

let vm = new Vue({
            el: '#app',
            data: {
                hobbyArray: ['编程', '阅读', '运动', '音乐', '游戏'],
            }

Answer 1

因为你把那个for写td上了，你应该一行两个td，现在爱好这一行除了前面那个爱好，你的for循环产生了5个td，然后变成那个td和上面行的td对齐了，下面代码用span不太对，但就是这个意思，你可以换成folat:left的div

<tr>
                    <td rowspan="1">爱好：</td>
                    <td>
                      <span  v-for="(item,index) in hobbyArray">
                        <input type="checkbox" v-bind:value="item" v-model="hobbies">
                        <label for="">{{item}}</label>
</span>
                    </td>
                </tr>