0

こんにちはすべて私は画面が広くなるにつれてインデントされている順序付きリストを持っています。リストアイテムの各レイヤーは、前のレイヤーよりもインデントされています。

誰でも助けることができます。これが私のコードです

<div id="left-content">

        <div id="product-header">

            <h1 class="red-text">Gmail</h1>
            <h2>A google approach to email</h2>

        </div>

        <p>Gmail is built on the idea that email can be more intuitive, efficient, and useful. And maybe even fun. After all, Gmail has:</p>

        <ol class="features">
            <li>
                <img src="../IMAGES/google-storage.png" alt="google-storage">
                <p class="features-header">Lots of space</p>
                <p>Over 10275.525924 megabytes (and counting) of free storage.</p>
            </li>
            <li>
                <img src="../IMAGES/google-cancel.png" alt="google-cancel">
                <p class="features-header">Less spam</p>
                <p>Keep unwanted messages out of your inbox.</p>
            </li>
            <li>
                <img src="../IMAGES/google-mobile.gif" alt="google-mobile">
                <p class="features-header">Mobile access</p>
                <p>Get Gmail on your mobile phone.<a href="#">Learn more</a></p>
            </li>
        </ol>

    </div><!--  "left-content -->




 #product-header{
    margin-bottom: 1.225em;
}

#main-content{
    padding: 2em;
    width: 80%;
    margin: 0 auto;
}

#left-content{
    width: 45%;
    min-width: 18.75em;
}

#left-content p{
    font-size: .8125em;
}

.red-text{
    color: red;
}

.features li{
    margin: 0.625em 2.5em 1.25em 0;
}

.features img{
    float: left;
    margin: 0 1em 1em 0;
}

.features-header{
    font-size: : .875em;
    margin-bottom: .3em;
}

＃left-contentpのフォントサイズに絞り込みました。

助けてくれる人に感謝します。

4

1 に答える 1

2

フローティング画像の高さがテキストよりもわずかに大きいため、望ましくない動作が発生している可能性があります。

に追加clear: bothしてみてください.features li：

.features li{
    clear: both;
    margin: 0.625em 2.5em 1.25em 0;
}

ここで非常にコンパクトな例を見つけることができます：http：//jsfiddle.net/urE23/

于 2012-08-04T22:16:48.580 に答える