html - 列表溢出到 div

Question

感谢您提前提供任何帮助。

看看这里： http: //www.martialgear.com/martial-arts-gear/sparring-gear.html

将鼠标放在第一个产品上，填充武器防护头饰

请注意上面的整个类别部分如何在悬停时更改颜色。由于某种原因，这使我的有序列表与其上方的 DIV 部分重叠。应该发生的只是产品部分的背景切换颜色。

它适用于第 2、第 3 和第 4 产品等。

我尝试了对 CSS 和 html 的各种调整，但无法做到这一点。

Answer 1

发生这种情况是因为第一个产品上方的所有元素都是浮动的并且永远不会被清除。

一个简单的解决方法是将其添加到您的 css 中：

#products-list {
    clear: both;
}

Answer 2

Also, your Ordered List <ol> is followed directly by a <div>, which is followed by an <li>. The <li> should go directly after the <ol>.

Here is what you have:

<ol class="products-list" id="products-list">
    <div id="product-listing" onclick="location.href='http://www.martialgear.com/martial-arts-gear/sparring-gear/padded-weapons-protective-headgear.html';" style="cursor:pointer;" class="odd">
    <li class="item">

Try changing this to

<ol class="products-list" id="products-list">
    <li class="item">
    <div id="product-listing" onclick="location.href='http://www.martialgear.com/martial-arts-gear/sparring-gear/padded-weapons-protective-headgear.html';" style="cursor:pointer;" class="odd">

Answer 3

您的整个事情都在“项目”类中，并且您有以下代码。

.products-list li.item {border-bottom:1px solid #d9ddd3; padding:5px 10px 5px 10px; }
.products-list li.item:hover { background:#EEEEEE; }

因此，当您将鼠标悬停在产品上时，您实际上是在“项目”上悬停。消除

.products-list li.item:hover { background:#EEEEEE; }

并将类似的悬停添加到您希望在悬停时更改颜色的特定元素。