Question

我正在为每个列表创建一个包含标题，说明和图标的列表，但我在响应方面存在问题。

目前，一切都很完美，但当我缩小窗口以查看响应结果时，我有：http://screencast.com/t/NlT927iGb

当我的标题进入两行以获得更多空间时，我的描述被破坏并且没有正确对齐。

这是我的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>

和我的CSS代码：

#index-features
{
    margin-top: 15px;
}

#index-features li
{
    border-bottom: #CCCCCC 1px solid;
    margin: 0 -20px 20px -20px;
    padding: 0 20px; 0 20px;
}

#index-features li:last-child
{
    border-bottom: none;
}

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

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

#feature-1:before
{
    background-position: 0 0;
}

#feature-2:before
{
    background-position: 0 -32px;
}

#feature-3:before
{
    background-position: 0 -64px;
}

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

不要忘记减少窗口以查看问题。

感谢。

Answer 1

原因是当您缩小屏幕尺寸时，它会将文本向下推到左图像的下边缘下方，该图像之前将内容推向右侧。一旦你的文字低于图像，没有任何东西将它推离左边界，所以你得到了这种效果。为了抵消它，只需添加更改：

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

为：

.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 
}

图片width的{{1}}和margin-right决定了.feature-title:before行的开始位置。您需要在.feature-title

中明确匹配此边距

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

1 个答案: