Нужна помощь в отображении списков детей без пробелов между списками родителей

Question

Я распечатываю список специальностей колледжей, которые мы предлагаем, а затем по каждой специальности у нас есть концентрации для каждой специальности.

Наша специальность науки имеет следующие концентрации: экология и лесное хозяйство, хиропрактика, химия, биология

Вот скриншот того, что он делает:

Я не хочу, чтобы интервал, который он отображал (я не хочу, чтобы интервал, который вы видите после скриншота управления персоналом AAS и после психологии.) На снимке экрана, приветствуется любая помощь.

Источник будет выглядеть так:

.col-middle .majors-list li {
  list-style-type: none;
  width: 50%;
  float: left;
  margin-bottom: 2px;
}

.col-middle ul.majors-list {
  margin-left: 0;
}

.col-middle ul.concentrations-list {
  overflow: auto;
}

.col-middle .concentrations-list li {
  float: none;
}

<ul class="majors-list">
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
</ul>

Answer 1

Без некоторого JavaScript вы не сможете это сделать. С mozilla или webkit вы можете использовать - [moz | webkit] -column-count: 2; но даже это не даст вам того же решения, которое вам предоставляет данный CSS, другими словами, порядок будет вертикальным, а не горизонтальным. Когда я играл со свойством column-count, внутренние столбцы тоже разбивались по столбцам, что, как я полагаю, было бы недостаточно.

Решение javascript, которое, как я считаю, может быть довольно легко реализовано с помощью такой инфраструктуры, как jquery, вероятно, будет брать каждый из элементов li и динамически размещать их с помощью комбинации позиции: относительной и позиции: абсолютных атрибутов и немного математика.

Answer 2

Одна вещь, которую вы можете попробовать, это сделать отображение списка ul.majors: встроенным; (или встроенный блок) и float: left; Это может работать.

---

Выше должно было быть «попробуйте создать свой ul.majors-list li display: inline;». Но я не могу заставить его работать, просто играя с ним быстро. Не уверен, как вы сможете это сделать, не избавляясь от самого главного ul и просто сделав каждый из них своим списком.

Answer 3

Вы хотите дать классу списка концентраций свойство display: none; в CSS. Затем вы можете отобразить один из подсписков, передав ему событие onclick, которое изменяет класс на отображение списка концентраций, добавив класс отображения списка концентраций в CSS и присвоив ему свойство display: block;.

Answer 4

Вы можете сделать это с помощью колонок CSS3, но я предполагаю, что это нужно для работы в этом браузере.

Answer 5

Попробуйте float: right вместо float: left.

Это работает для Firefox 2. Не работает с (многими) другими браузерами.