需要帮助显示子列表而不使父列表空格
需要帮助显示子列表而不使父列表空格
提问于 2008-11-26 17:19:12
我正在打印我们提供的大学专业的列表，然后在每个专业中，我们有每个专业的集中度。
我们的理科专业有以下专业:环境科学与林业，脊椎疗法，化学，生物学
下面是它正在做什么的屏幕截图：
我不想要它显示的间距(我不想要人力资源管理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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2008-11-26 20:22:13
如果没有一些javascript，你将无法做到这一点。对于mozilla或webkit，您可以使用-moz|webkit-column-count: 2；但即使这样也不会给您提供与给定css几乎为您提供的相同的解决方案，换句话说，排序将是垂直的而不是水平的。当我使用column-count属性时，内部列表也在列上拆分，我认为这也是不够的。
一个javascript解决方案，我相信用jquery这样的框架可以很容易地实现，它可能会获取每个li元素，并通过position:relative和position:absolute属性的组合以及一些数学运算来动态定位它们。
Stack Overflow用户
发布于 2008-11-26 17:49:03
尝试使用float: right而不是float: left。
这适用于Firefox2。不适用于(许多)其他浏览器。
Stack Overflow用户
发布于 2008-11-26 19:00:36
您希望在CSS中为浓度列表类提供一个display: none;属性。然后，您可以通过为其提供onclick事件来显示其中一个子列表，该事件将类更改为浓度列表显示，并将浓度列表显示类添加到CSS，并为其提供display: block;属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/321477
复制相关文章
相似问题
腾讯云开发者
