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

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]-количество столбцов:2;но даже это не даст вам того же решения, которое данный css почти предоставляет для вас, другими словами, порядок будет вертикальным, а не горизонтальным.Когда я играл со свойством column-count, внутренние списки тоже разбивались по столбцам, что, как я полагаю, тоже было бы неадекватно.

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

Answer 2

Попробуйте поплавать:прямо вместо float:налево.

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

Answer 3

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

Answer 4

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

Answer 5

Одна вещь, которую вы могли бы попробовать, - это отобразить свой ul.majors-list:встроенный;(или встроенный блок) и float:слева;IT мочь работать.

---

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