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

可能由于浮动图像的高度略高于文本而导致不需要的行为。

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

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

您可以在此处找到一个非常紧凑的示例：http://jsfiddle.net/urE23/

未排序的列表项是缩进的

1 个答案: