我有28个项目的复选框列表。
我希望在桌面上查看时连续显示4个项目，在移动设备中每行显示1个项目。
我怎样才能做到这一点？
我尝试过的事情如下：（但没有成功）......
现行守则是：
<style>
input[type="checkbox"].mixed + label {
margin:5px;
color:#073F4B;
font-size:14px;
width :150px;
}
@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
input[type="checkbox"].mixed + label {
margin:5px;
color:#073F4B;
font-size:14px;
width :90%;
}
}
</style>
显示复选框列表（例如显示8个项目）：
<input type="checkbox" name="hobbies[]" value="Astrology" class="mixed" <?php if(in_array(Astrology,$my_stored_game)){echo "checked";}?>><label>Astrology</label><br>
<input type="checkbox" name="hobbies[]" value="Book_Collection" class="mixed" <?php if(in_array(Book_Collection,$my_stored_game)){echo "checked";}?>><label>Book Collection</label><br>
<input type="checkbox" name="hobbies[]" value="Coin_Collection" class="mixed" <?php if(in_array(Coin_Collection,$my_stored_game)){echo "checked";}?>><label>Coin Collection</label><br>
<input type="checkbox" name="hobbies[]" value="Coloring" class="mixed" <?php if(in_array(Coloring,$my_stored_game)){echo "checked";}?>><label>Coloring</label><br>
<input type="checkbox" name="hobbies[]" value="Computer" class="mixed" <?php if(in_array(Computer,$my_stored_game)){echo "checked";}?>><label>Computer</label><br>
<input type="checkbox" name="hobbies[]" value="Cooking" class="mixed" <?php if(in_array(Cooking,$my_stored_game)){echo "checked";}?>><label>Cooking</label><br>
<input type="checkbox" name="hobbies[]" value="Dance" class="mixed" <?php if(in_array(Dance,$my_stored_game)){echo "checked";}?>><label>Dance</label><br>
<input type="checkbox" name="hobbies[]" value="Trecking" class="mixed" <?php if(in_array(Trecking,$my_stored_game)){echo "checked";}?>><label>Trecking</label>
感谢您提供的建议