Question

我在这个问题上花了好几个小时。我知道它与float有关：left，并且display：inline-block。我试过clearfix。它只是不起作用。

我甚至删除了元素检查器中的所有文件。它仍在显示楼梯。下面是链接，此页面基于wordpress默认模板，我添加了[featured_products per_page =＆＃34; 12＆＃34;列=＆＃34; 4＆＃34;的OrderBy =＆＃34;日期＆＃34;订单=＆＃34; desc＆＃34;]在此页面上。

http://101.0.116.204/~vomcom/wp/months-resources/

我想让它看起来像这样：

http://101.0.116.204/~vomcom/wp/product-category/books/

我正在使用wootheme canvas主题

非常感谢有人可以提供帮助。

Answer 1

正如卡洛斯建议的那样，在容器中添加行高0来解决问题，尽管你面临另一个问题（孩子们继承了行高 - 例如＆＃34; Sale＆＃34;标签，例如）。

似乎问题是包裹<pre>的{{1}}标记。将其更改为<ul>（或仅删除它）可解决浮动/楼梯问题。此外，您的标记有效（自pre tags should contain phrasing content起）。

Answer 2

将此添加到您的CSS：

ul.products{
    line-height: 0;
}

它看起来像所需的链接。

你仍然需要做一些工作才能使它看起来相等，如果你在这个元素的子元素中需要不同的line-height，只需设置它：）

Answer 3

ul.products的CSS路径从一个页面到另一个页面非常不同。

正确布局的路径：

#main > ul

布局断开的路径：

#main > article > section > pre > div > ul

由于编辑每个单独的类来查找这个单独的问题是一项无休止的任务（由于涉及大量的类），我建议您完全删除有问题的页面，将正确的页面复制到新的页面，然后编辑页面显示您想要的内容，并注意不要添加无用的对象，div或类。

显示：go google chrome上的Staircase bug

3 个答案: