jquery - 复选框列表，按字母顺序排列在自上而下的列中

Question

我试图显示我的复选框列表，以便字母顺序是垂直的而不是水平的。显然，当将 fiddle 中的容器拖动到仅单列宽度时，一切都很好，但从 2 列开始，复选框顺序水平运行。我似乎无法将之前的任何相关帖子应用到此(使用 display:block、float: left 等)，但没有任何效果，它让我头疼!非常感谢任何帮助。 fiddle :http://jsfiddle.net/rub5rc8x/

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<div class="CountryListBoxClass_prodn">
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN191" value="Croatia" />Croatia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN208" value="Denmark" />Denmark</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN233" value="Estonia" />Estonia</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN276" value="Germany" />Germany</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN348" value="Hungary" />Hungary</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN372" value="Ireland" />Ireland</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN428" value="Latvia" />Latvia</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN470" value="Malta" />Malta</label>
</div>

.

.CountryListBoxClass_prodn label {
  display: inline-block;
  border: 1px solid transparent;
  width: 213px;
  background-color: white;
  margin: 0px 7px 2px 0px;
}

.CountryListBoxClass_prodn input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
  margin-right: 10px;
}

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  Padding: 10px 0px 0px 5px;
  background-color: #fcfcfc;
  overflow-y: scroll;
  font-family: "Verdana";
  font-size: 11px;
}

Answer 1

您可以使用 flex css 并且它们的顺序可以通过一些 jQuery 逻辑来设置，如下所示

var n = $('.myEuropeCountries').length;
for (i = 1; i <= (n / 2).toFixed(); i++) {
  $('.myEuropeCountries:nth-child(' + i + ')').css('order', (2 * i - 1))
}
for (i = (n / 2 + 1).toFixed(); i <= n; i++) {
  $('.myEuropeCountries:nth-child(' + i + ')').css('order', (2 * i - n - (n % 2)))
}

* {
  box-sizing: border-box;
}

.CountryListBoxClass_prodn label {
  border: 1px solid transparent;
  width: 49%;
  background-color: white;
  margin: 0.5%;
}

.CountryListBoxClass_prodn input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
  margin-right: 10px;
}

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  padding: 10px;
  background-color: #fcfcfc;
  display: flex;
  flex-wrap: wrap;
  font-family: "Verdana";
  font-size: 11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CountryListBoxClass_prodn">
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN191" value="Croatia" />Croatia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN208" value="Denmark" />Denmark</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN233" value="Estonia" />Estonia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN276" value="Germany" />Germany</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN348" value="Hungary" />Hungary</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN372" value="Ireland" />Ireland</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN428" value="Latvia" />Latvia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN470" value="Malta" />Malta</label>
</div>