1

我正在打印我们提供的大学专业列表，然后在每个专业中，我们都有每个专业的浓度。

我们的科学专业有以下浓度：环境科学与林业、脊椎按摩疗法、化学、生物学

这是它正在做什么的屏幕截图： 替代文字

我不希望它显示的间距（我不希望您在人力资源管理 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>

4

5 回答 5

1

如果没有一些 javascript，您将无法做到这一点。对于 mozilla 或 webkit，您可以使用 -[moz|webkit]-column-count: 2; 但即使这样也不会给您提供给定 css 几乎为您提供的相同解决方案，换句话说，排序将是垂直的而不是水平的。当我使用 column-count 属性时，内部列表也在列上被拆分，我认为这也不够。

一个javascript解决方案，我相信可以很容易地用一个像jquery这样的框架来完成，它可能会使用每个li元素，并结合position:relative和position:absolute属性和一些数学来动态定位它们。

于 2008-11-26T20:22:13.267 回答
0

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

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

于 2008-11-26T17:49:03.453 回答
0

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

于 2008-11-26T19:00:36.303 回答
0

你可以用 CSS3 Columns 来做到这一点，但我猜你需要它才能在那个浏览器中工作。

于 2008-11-26T19:07:01.483 回答
0

您可以尝试的一件事是让您的 ul.majors-list display: inline; （或内联块）和浮动：左；它可能会起作用。

上面应该是“尝试让你的ul.majors-list li display: inline;”。但是我不能让它快速工作。不知道如何在不摆脱最顶层的 ul 并让每个人成为自己的列表的情况下做到这一点。

于 2008-11-26T22:49:36.620 回答