尝试将许多单选按钮显示为列-获得奇怪的输出

Question

JSFiddle在这里。

我有一个包含许多单选按钮的div 。 我想要一种方法：在一列中仅显示4个单选按钮，然后在下一列中显示下一个4个单选按钮，依此类推...

从我的SO搜索中，我从以下问题中找到了这种方式：

 .mdl-radio { display: block; margin: 15px auto; } .mdl-radio, .choose-message-caption { margin: 25px; } .radiobuttons-container { height: 100vh; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } label.mdl-radio { display: inline-block; } 

 <div class="radiobuttons-container"> <label for="sacha" class="mdl-radio mdl-js-radio"> <input id="sendAuthenticationInfo" class="mdl-radio__button" type="radio" name="map-message" value="sacha" /> <span class="mdl-radio__label">Sacha</span> </label> <label for="bob" class="mdl-radio mdl-js-radio"> <input id="bob" class="mdl-radio__button" type="radio" name="map-message" value="bob" /> <span class="mdl-radio__label">Bob</span> </label> <label for="marley" class="mdl-radio mdl-js-radio"> <input id="marley" class="mdl-radio__button" type="radio" name="map-message" value="marley" /> <span class="mdl-radio__label">Marley</span> </label> <label for="canny" class="mdl-radio mdl-js-radio"> <input id="canny" class="mdl-radio__button" type="radio" name="map-message" value="canny" /> <span class="mdl-radio__label">Canny</span> </label> <label for="amy" class="mdl-radio mdl-js-radio"> <input id="amy" class="mdl-radio__button" type="radio" name="map-message" value="amy" /> <span class="mdl-radio__label">Amy</span> </label> <label for="popye" class="mdl-radio mdl-js-radio"> <input id="popye" class="mdl-radio__button" type="radio" name="map-message" value="popye" /> <span class="mdl-radio__label">Popye</span> </label> <label for="insider" class="mdl-radio mdl-js-radio"> <input id="insider" class="mdl-radio__button" type="radio" name="map-message" value="insider" /> <span class="mdl-radio__label">Insider</span> </label> <label for="dogma" class="mdl-radio mdl-js-radio"> <input id="dogma" class="mdl-radio__button" type="radio" name="map-message" value="dogma" /> <span class="mdl-radio__label">Dogma</span> </label> <label for="rowdy" class="mdl-radio mdl-js-radio"> <input id="rowdy" class="mdl-radio__button" type="radio" name="map-message" value="rowdy" /> <span class="mdl-radio__label">Rowdy</span> </label> <label for="albumin" class="mdl-radio mdl-js-radio"> <input id="albumin" class="mdl-radio__button" type="radio" name="map-message" value="albumin" /> <span class="mdl-radio__label">Albumin</span> </label> <label for="donna" class="mdl-radio mdl-js-radio"> <input id="donna" class="mdl-radio__button" type="radio" name="map-message" value="donna" /> <span class="mdl-radio__label">Donna</span> </label> <label for="eli" class="mdl-radio mdl-js-radio"> <input id="eli" class="mdl-radio__button" type="radio" name="map-message" value="eli" /> <span class="mdl-radio__label">Eli</span> </label> <label for="rose" class="mdl-radio mdl-js-radio"> <input id="rose" class="mdl-radio__button" type="radio" name="map-message" value="rose" /> <span class="mdl-radio__label">Rose</span> </label> </div> <!-- .radiobuttons-container --> 

问题在于，当我拖动JSFiddle输出面板的左边缘以更改其宽度时，输出会以奇怪的方式显示在多列中。

当我在我的本地主机XAMPP写了一个测试程序，输出是这个奇怪的：

那么我的问题的解决方案是什么。

Answer 1

检查这个小提琴

您只需要在列中指定项目数。

.radiobuttons-container {
    height:100vh;
    -webkit-column-count: 4;
    -moz-column-count:4;
    column-count: 4;
}