2

この Web ページの "Beautifully Hosted" という見出しの下にある 2 つの順序付けられていないリストに問題があります。イメージ リストを形成する 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 では、2 つのリストが 1 つのリストであるかのように隣り合っており、積み重ねられないため、ボックスが大きすぎてデザイン全体が台無しになります。

4

2 に答える 2

2

#box2 に 265px の幅を追加すると、問題が解決します。

于 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 に答える