0

我为我的网站使用了响应式 Skeleton 框架（样板）（你可以从这里获得它：http ://www.getskeleton.com/ ）。

我有<ul>不同高度的列表列。要清除嵌套列，CSS 说我需要将.clearfix类放到父元素中。

我已经尝试放置类，但它不会清除嵌套列。由于我使用的是<ul>列表项，因此我不能将元素放入或放入<ul>元素中。

有什么解决办法吗？

我的html代码：

    <ul class="container">
      <li class="one third columns alpha">a</li>
      <li class="one third columns">b</li>
      <li class="one third columns omega">c</li>
      <li class="two thirds columns alpha">d</li>
      <li class="one third columns omega">e</li>
    </ul>

在 Skeleton CSS 中，第一列的高度为 500px，然后 (d) 和 (e) 列应该移动到底部/第二行，或者换句话说我需要清除嵌套列。

我想在<li class="clear"></li>我移到另一排时再放一个空的，它可以工作，但我正在寻找替代解决方案。比添加空更合适的东西<li>

谢谢你。

4

2 回答 2

0

尝试添加style='clear:both;'到标签中而不是class='clearfix'

在我的经验中，很多时候这就是所谓的“clearfix”类所做的事情（一种常见的 CSS 实践）。出于某种原因，您的代码可能没有在样式表中找到该类，因此这只是一个快速猜测/修复。

于 2013-07-26T04:46:56.087 回答
0

<ul>如果你真的想用这些元素走这条路，我认为你可以用 nested 来做到这一点。

这是 Skeleton 的样子：

<ul>

  <li class="six columns alpha clearfix">
    <ul class="container">
      <li class="one third columns">a</li>
      <li class="one third columns">b</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

  <li class="six columns omega clearfix">
    <ul class="container">
      <li class="one third columns">c</li>
      <li class="one third columns">d</li>
      <li class="one third columns">e</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

</ul>

如果我理解并正确解决了您的问题，请告诉我。根据骨架缺乏文档说：您需要将.alpha类添加到第一个嵌套行，将类添加.omega到第二个嵌套行并重复。

您可以看到父元素<li class="six columns alpha clearfix">元素已.clearfix设置，现在我们使用嵌套列表将 A 列和 B 列放在一行中，将 C、D 和 E 列放在第二行中。

于 2013-07-26T07:03:23.047 回答