2

我在此网页上“精美托管”标题下的两个无序列表遇到问题。形成图像列表的两个列表的代码是：

<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 中，这两个列表是相邻的，好像是一个列表，不堆叠，导致盒子太大，打乱了整个设计。

4

2 回答 2

2

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

于 2013-04-13T03:41:35.017 回答
0

您还需要浮动两个 UL：

#box2 ul {
    float:left;
    margin: 5px 0 0 0;
    padding: 0;
}
于 2013-04-13T09:58:05.853 回答