Html 为什么我的标题在两行中给出这个渲染？

我正在做一个列表，每个列表都有一个标题、描述和图标，但我在响应方面有一个问题

目前，一切都很完美，但当我缩小窗口以查看响应结果时，我发现：

当我的标题分成两行以留出更多空间时，我的描述被打断，并且没有正确对齐

以下是我的HTML代码：

<div id="index-features">
    <ul>
        <li>
            <h5 id="feature-1" class="feature-title">Instant access</h5>
            <span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
        </li>
        <li>
            <h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
            <span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
        </li>
        <li>
            <h5 id="feature-3" class="feature-title">Modern techniques</h5>
            <span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
        </li>
        <li>
            <h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products.</h5>
            <span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
        </li>
    </ul>
</div>

您可以在此处进行实时预览：nextgenfocus.com/test/

别忘了缩小窗口以查看问题

---

谢谢。

原因是，当你缩小屏幕尺寸时，它会将文本向下推到左图像的下边缘下方，而左图像之前会将内容向右推。一旦文本位于图像下方，就不会有任何东西将其推离左边框，从而获得效果。要抵消此影响，只需添加以下更改：

.feature-description
{
    display: block;
    overflow: hidden;
    margin: 5px 0 20px 0;
}

致：

通过添加左边距，您可以强制内容与标题保持对齐。通过将图像的宽度添加到图像上的右边距值（该值决定标题与左边框的距离），可以找到左边距值：

.feature-title:before
{
    content: "";
    float: left;
    background: url("../images/index-features-sprite.png") no-repeat;
    width: 32px;  // this value
    height: 32px;
    margin-right: 5px; // plus this value 
}

---

图像

的
宽度
和
右边距
。功能标题：在
之前决定
。功能标题
行的起始位置。您需要在
中明确匹配此边距。功能描述
我现在没有时间，但会在返回时解释：
。功能描述{margin:5px 0 20px 37px；}
是的，我也使用过此解决方案，但我认为有一种方法可以直接对齐文本，而不必添加边距。谢谢你的解释。
.feature-description {
    display: block;
    overflow: hidden;
    margin: 13px 0 20px 37px;
}

.feature-title:before
{
    content: "";
    float: left;
    background: url("../images/index-features-sprite.png") no-repeat;
    width: 32px;  // this value
    height: 32px;
    margin-right: 5px; // plus this value 
}