需要帮助的孩子们显示没有列出间距父名单

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数：2;但即使是不会给你给定的CSS几乎以为您提供同样的解决方案，换句话说，排序将是垂直而不是水平。当我与列数属性弹，内部列表正在分裂的列太多，我认为不能满足需求无论是。

一个JavaScript的解决方案，我相信可以用像jQuery框架很容易地实现，可能会采取每个li元素的和动态地将它们与位置的组合的位置是：相对于和位置是：绝对属性和一点点数学。

Answer 2

尝试浮动：右，而不是浮动：左

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

Answer 3

您想给浓度列表类的CSS display: none;属性。 然后，您可以通过给它onclick事件改变的类浓度一览显示和添加浓度一览显示类的CSS，给它一个display: block;显示属性的子列表中的一个。

Answer 4

您可以做到这一点与CSS3列，但我猜你需要这个工作的是的浏览器。

Answer 5

有一件事情你可以尝试是使你的ul.majors列表显示：内联; （或内联块）和浮动：左;它可以的工作。

---

上面的应该是 “尝试使您的 ul.majors列表里显示：内联;”。但我不能得到它的工作只是玩弄它快。不知道你将如何能够做到这一点没有摆脱最顶层的UL和只是让各为自己的名单。