html - 需要帮助显示子列表而不间隔父列表

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 元素并使用 position:relative 和 position:absolute 属性的组合动态定位它们以及一点点数学。