Question

我有一些 CSS ，我一直试图弄清楚，出于某些奇怪的原因，它并不想在加载时生效。

例如，这是加载后直接显示的方式：

然后，如果我进入检查元素并更改1个数字的像素，它将恢复为：

@Niet the Dark Absol的解决方案：

这可能是由于层次结构问题造成的吗？因为它没有拿起 CSS ，因为它正在挑选别的东西？

HTML：

<div class="additionals">
    <ul>
        <li>
            <div class="fa fa-rocket"></div>
            Increase your efficiency.
        </li>
        <li>
            DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing.
        </li>
    </ul>
</div>

CSS：

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}

.additionals .fa{
    color: #000!important;
    margin: 0 2px 0 0!important;
    position: relative;
    margin-left: -37px;
    font-size: 33px;
    top: 27px;
    left: -6px;
}

JS FIDDLE HERE

Answer 1

我会猜测它是因为当浏览器呈现页面时图标字体没有加载，并且它不会重新计算流量。< / p>

尝试为您的图标元素指定width和height。这应该保留流量中的空间，以便事物在其周围漂浮，而不必触发重新绘制。

Answer 2

是的，它是从等级制造的。取决于第二个图像，您必须使用两列。一个用于图标，一个用于文本。我不知道你为什么要使用它，但是如果必须的话，你必须做那样的事情：

<div class="additionals">
    <ul>
        <li>
            <div class="fa fa-rocket"></div>
            <div class="li-content"> 
                <p class="content-title">Increase your efficiency.</p>
                <p class="content-text">DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing. </p>
            </div>
        </li>
    </ul>
</div>

和CSS：

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}

//Clear for floated elements
.additionals ul li:after {
    content: " ";
    display: table;
    clear: both;
}

.additionals .fa{
    color: #000!important;
    width: 40px; //Choose any width you like.
    float: left; //Float icon to the left as a column
}

.additionals .li-content {
    width: 360px; // 400px - 40px(icon width)
    float: left; //Float content to left as a colum near of icon
}

Answer 3

您应该在UL块上定义图标。无需额外的div元素：

HTML：

<div class="additionals">
    <ul class="fa fa-rocket" >
        <li>Increase your efficiency.</li>
        <li>DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing.</li>
    </ul>
</div>

CSS：

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}
.additionals .fa::before {
    margin-left:-45px;
    float:left;
    font-size: 36px;
    color: #000!important;
}

请参阅此example

CSS不会对负载生效吗？

3 个答案: