html - 无序列表项缩进

Question

大家好，我有一个有序列表，随着屏幕变宽，它会缩进。每层列表项都比上一层缩进。

谁能帮忙。这是我的代码

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

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

Answer 1

不良行为可能是由于 float 图像的高度略大于文本而导致的。

尝试将 clear: both 添加到 .features li:

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

你可以在这里找到一个非常紧凑的例子:http://jsfiddle.net/urE23/