html - 在 Opera 中堆叠 HTML 无序列表

Question

我在处理 this web page 上的两个无序列表时遇到问题在“精美托管”标题下。构成图像列表的两个列表的代码是:

<ul>
    <li><div class="image"><img src="images/icon_staff.png" alt=""></div>Knowledgeable Support</li>
    <li><div class="image"><img src="images/icon_backups.png" alt=""></div>Remote Backups</li>
    <li><div class="image"><img src="images/icon_infinity.png" alt=""></div>Hundreds of Features</li>
</ul>

<ul>
    <li><div class="image"><img src="images/icon_security.png" alt=""></div>Secure Servers and Datacenter</li>
    <li><div class="image"><img src="images/icon_gears.png" alt=""></div>Web Software Auto Installer</li>
    <li><div class="image"><img src="images/icon_price.png" alt=""></div>Competitive Pricing</li>
</ul>

CSS:

#box2 ul {
    margin: 5px 0 0 0;
    padding: 0;
}

#box2 li {
    list-style: none;
    float: left;
    margin: 15px 5px 0 0;
    font-size: 11px;
    width: 80px;
    text-align: center;
}

现在，这在除 Opera 之外的所有浏览器中都能完美运行。在 Opera 中，两个列表紧挨着，就好像是一个列表，不堆叠，导致框太大，从而破坏了整个设计。

Answer 1

如果您为#box2 添加 265px 的宽度，它将解决问题。