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-content p 上的字体大小。

感谢任何能提供帮助的人。

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 回答