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

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属性和一点点的组合来动态定位它们。数学。

Answer 2

试试float：right而不是float：left。

这适用于Firefox 2.不适用于（很多）其他浏览器。

Answer 3

您希望在CSS中为concentration-list类赋予display: none;属性。 然后，您可以通过提供onclick事件来显示其中一个子列表，该事件将类更改为浓度列表显示并向CSS添加浓度列表显示类并为其提供display: block;属性。

Answer 4

您可以使用CSS3列执行此操作，但我猜您需要在那个浏览器中使用它。

Answer 5

你可以尝试的一件事是制作你的ul.majors列表：inline; （或内联块）和浮动：左; 可以工作。

---

以上应该是“尝试制作 ul.majors-list li display：inline;”。但我不能让它快速地玩它。不知道你怎么能够做到这一点，而不是摆脱最顶层的ul，只是让每个人都成为他们自己的名单。