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的宽度，它将解决问题。

Answer 2

你也需要浮动两个UL：

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

在Opera中堆叠HTML无序列表

2 个答案: